Gentle Design
Trigger: design a screen or page, mockup, landing page, UI directions, artboards, try a...
Install
npx skills add Gentleman-Programming/gentle-shell --skill gentle-design -g -a claude-code -y- Repository
- Gentleman-Programming/gentle-shell1.5k
- Category
- Design
- Updated
- 3d ago
- License
- Apache-2.0
- Context cost
- Mediumabout 2,178 tokens
- Runs scripts
- No, instructions only
What it does
Trigger: design a screen or page, mockup, landing page, UI directions, artboards, try a different approach, design system sync. Write self-contained HTML design directions under design/<slug>/.
Activation Contract
Use this skill by default whenever the user asks, in plain words, for a UI design, mockup, screen, landing page, or visual directions, or iterates on artboards under design/. Do not use it to implement production code in the project's stack.
The /gentle:design commands are optional shortcuts: every action also works from a plain request, through this skill and the gentle_design tool (list, open, stop, implement, handoff).
Hard Rules
- Every artboard is one self-contained HTML file: inline CSS, JS, and SVG; system font stacks only. Never reference external URLs, CDNs, remote fonts, images, or scripts.
- Use realistic content for the audience; no lorem ipsum or placeholder names.
- Accessible markup: semantic elements and landmarks, WCAG AA contrast, visible focus styles,
prefers-reduced-motionrespected for any motion. - When
design/system.mdexists, read it first and use only its tokens and component rules; run the Self-check from "Design system sync" before finishing any artboard. - Ask at most one clarifying question, and only when the brief lacks the goal or the content.
- Iterating edits only the targeted artboard. Never rewrite the others.
