This repository contains the personal skills I’ve collected into one place.
Install all skills in one project:
npx skills add https://github.com/chiroro-jr/skillsInstall all skills globally:
npx skills add -g https://github.com/chiroro-jr/skillsInstall a specific skill in one project:
npx skills add https://github.com/chiroro-jr/skills --skill dbmlInstall a specific skill globally:
npx skills add -g https://github.com/chiroro-jr/skills --skill dbmlEight linked skills for marketing websites, from project setup through working code. Choose design-only, code-only, or design-then-code during initialization. Code work reuses a confirmed existing project or the chosen framework; a new project defaults to vanilla HTML/JavaScript with Vite and Tailwind when there is no preference. Buildless HTML is an explicit option. Design tools need verified access to the required capabilities.
| Skill | Output |
|---|---|
| webcraft-init | 00-project.md: mode, workspace, tools, artifact locations and stage ledger |
| webcraft-brief | 01-brief.md: audience, goals, scope and evidence |
| webcraft-plan | 02-site-plan.md and visual sitemap |
| webcraft-copy | 03-copy.md: section copy or an index to its authoritative source |
| webcraft-wireframe | 04-wireframes.md and editable low-fidelity pages or frames |
| webcraft-direction | 05-direction.md and rendered visual concepts |
| webcraft-design | 06-design.md and complete responsive designs |
| webcraft-build | Working website and 07-validation.md |
Initialization inspects existing components, token systems, shadcn configuration and design libraries, then establishes preserve, extend, redesign, or new. Existing systems take precedence over the neutral starter theme. Direction owns visual-system choices; design completes components and maintains a viewable style guide. No shadcn component dependency is imposed.
UI stages fetch relevant Jakub Krehel skills from the current upstream default branch on demand, using one resolved commit per task. They do not require installing or vendoring the collection. The project record notes fetched revisions and unavailable guidance.
The copy stage similarly follows Corey Haines's copywriting guidance. It adds page messaging notes, sourced customer language, headline/CTA alternatives, and relevant metadata while preserving the section plan, evidence requirements, and authoritative copy source. Frameworks are optional aids; they do not justify invented offers or claims.
Motion follows Emil Kowalski's skills with the same current-upstream, one-revision-per-task policy: direction selects purposeful opportunities, design implements or prototypes them, and build verifies playback and behaviour. Reduced motion, interruption and input methods are part of the handoff. Design tools without animation support use editable state frames and explicit notes; animation does not require switching to code or installing a library.
Records default to the website project's docs/webcraft/, not this skills repository. In code-only mode, wireframe routes evolve into the finished site. In design software, wireframes, concepts and final designs occupy separate boards. Design-only ends at design handoff.
Invoke a stage to create, resume or revise its work. A repeated command preserves existing decisions; if no change is specified, it asks what to revise. Missing prerequisites are reported with the appropriate earlier command; equivalent existing artifacts can satisfy them. Each stage reports affected downstream work and the next step without automatically running it. ready does not mean user-approved.
Install the eight skills together using the repository installer above, or select their names with --skill. Invoke them using your agent's skill mechanism, such as $webcraft-init in Codex or /webcraft-init in clients with slash commands. Stage records remain usable across sessions; the skills do not require one another's instruction files to be installed at relative filesystem paths.
The workflow adapts Relume's section planning, editable wireframes, and visual concepts. It does not claim to reproduce Relume's internal agents or require its component library. Instruction structure follows OpenAI's skill and prompt guidance: focused descriptions, conditional detail, and explicit completion boundaries.
Helps review and improve repository-level agent instruction files such as CLAUDE.md and AGENT.md.
Focus areas:
- auditing weak or bloated instructions
- rewriting agent guidance to be more actionable
- keeping agent docs procedural, durable, and repo-specific
Installation:
npx skills add https://github.com/chiroro-jr/skills --skill better-agent-mdHelps create, refine, and validate database schemas written in DBML.
Focus areas:
- authoring readable DBML schemas
- translating SQL schemas into DBML
- documenting tables, enums, refs, indexes, checks, and related structures
Installation:
npx skills add https://github.com/chiroro-jr/skills --skill dbmlHelps work with OKLCH colors for CSS, design tokens, and palette design.
Focus areas:
- converting between OKLCH and other color spaces
- building balanced palettes and shade ramps
- handling gamut and chroma issues for display-ready color output
Installation:
npx skills add https://github.com/chiroro-jr/skills --skill oklchHelps design UIs in Pencil (.pen files) and generate production-oriented code from those designs.
Focus areas:
- reusing design system components
- using design tokens instead of hardcoded values
- checking layouts for overflow and visual issues
- supporting design-to-code workflows
Installation:
npx skills add https://github.com/chiroro-jr/skills --skill pencil-designHelps research libraries, frameworks, packages, and GitHub repositories source-first.
Focus areas:
- searching persistent local clones in
~/.sourcerer/repos - cloning missing GitHub repos into the Sourcerer cache
- safely refreshing cached repos with
scripts/update-repos.sh - answering from source, docs, tests, and examples with immutable GitHub permalinks
- using git history, blame, PRs, and issues for change/rationale questions
- falling back to ctx7/find-docs only when no usable reference repo exists
Installation:
npx skills add https://github.com/chiroro-jr/skills --skill sourcerer