northseadl/norix-skills/agent-front-design
- community
Checking that the SKILL.md file is still in the repository.
'Frontend design blueprints with craftsmanship scoring, self-critique
Install
npx vskill@latest install northseadl/norix-skills/agent-front-designSKILL.md
Frontend Design Excellence
Produce stunning, implementable frontend designs. Break free from AI aesthetic defaults. Push every component from "functional" to "remarkable."
Modes
Explore
Creative direction exploration. Generate 2-3 candidates with rationale and risks. No "publishable" conclusion. Read references/aesthetic-intelligence.md first.
Production
Converge to one implementable spec. Requires:
- Choose one direction, reject alternatives with reasons
- Full spec: color, typography, layout, component tree, state coverage
- Run Critique (see below) — fix all 🔴 before delivery
- Output quality score and release recommendation
Critique
Self-evaluation as a harsh design critic. Breaks you out of aesthetic comfort zones.
Auto-triggered at end of Production. User-triggered anytime via "critique", "残酷审视", "review the design."
Execute: read references/critique-protocol.md, run the full protocol.
Default flow: Explore → Production (includes Critique) → Deliver.
Reference Routing
Read on demand, by task phase:
| Phase | File | When | |
|---|---|---|---|
| Direction | references/aesthetic-intelligence.md | Always at start — the core | |
| Critique | references/critique-protocol.md | Production end, or user request | |
| Engineering | references/design-system.md | Defining tokens, modern CSS | |
| IA/Interaction | references/page-patterns.md | Page structure, states, flows | |
| Handoff | references/engineering-handoff.md | React/Vue delivery |
Delivery Checklist
Final output must include:
- One primary direction + rejected alternatives with reasons
- Color palette with OKLCH values and brand rationale
- Typography pairing with contrast justification
- Key page layouts (ASCII/wireframe)
- Component tree with state boundaries
- State coverage:
loading / empty / error / success / permission - Critique report (or reason for skip)
- Quality score and release recommendation
- Accessibility checkpoints (contrast, keyboard, semantics)
- Performance budget (LCP/INP/CLS targets)
Security
- Security scanPassed, 90 of 100Pattern checks on the skill's files.
- Model reviewPassed
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingagent-front-design/SKILL.md
Popularity
- 7-day trend score
- 5
Not refreshed yet.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/northseadl/norix-skills/agent-front-design)