ui-generate
Skill1 starsChanged 5 months agoMITView on GitHub
Invoke when user asks to build UI component, page, screen, design. "build a", "design a", "create a UI for", "make a dashboard", "landing page", "component", "form", "layout". SDLC categories: UI Design, Code Generation.
In this repository27 other files it gives its agents.
- AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- .github/copilot-instructions.mdCopilot instructions
- apex-archSkill
- apex-debugSkill
- apex-flexSkill
- apex-infraSkill
- apex-novaSkill
- apex-perfSkill
- apex-reedSkill
- apex-reviewSkill
- apex-secSkill
- apexSkill
- apex-uiSkill
- bug-patchSkill
- debug-protocolSkill
- deploy-pipelineSkill
- full-stack-scaffoldSkill
- mvp-cutSkill
- perf-auditSkill
- pr-reviewSkill
- refactorSkill
- requirements-to-specSkill
- researchSkill
- sec-reviewSkill
- system-designSkill
- test-harnessSkill
The file
Files
UI Generate Skill (Zara's Protocol)
- Classify mood — Trust / Energy / Authority / Clarity / Warmth
- Define tokens — Output :root {} CSS variables block first
- Choose typography — Display face + body face + scale
- Layout decision — Flex-first, grid only for 2D layouts
- Build — shadcn/ui + Tailwind only, mobile-first
- Anti-slop verify — □ No arbitrary Tailwind □ No hardcoded colors in JSX □ No inline styles □ Consistent radius □ WCAG AA □ Dark variants □ Mobile-first □ Semantic HTML
Output: design tokens block → component code → usage example
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
Reviews can't be read right now.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.