northseadl/norix-skills/agent-front-design

Trust tier 3
  • community
Source check pending

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-design

SKILL.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:

  1. Choose one direction, reject alternatives with reasons
  2. Full spec: color, typography, layout, component tree, state coverage
  3. Run Critique (see below) — fix all 🔴 before delivery
  4. 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:

PhaseFileWhen
Directionreferences/aesthetic-intelligence.mdAlways at start — the core
Critiquereferences/critique-protocol.mdProduction end, or user request
Engineeringreferences/design-system.mdDefining tokens, modern CSS
IA/Interactionreferences/page-patterns.mdPage structure, states, flows
Handoffreferences/engineering-handoff.mdReact/Vue delivery

Delivery Checklist

Final output must include:

  1. One primary direction + rejected alternatives with reasons
  2. Color palette with OKLCH values and brand rationale
  3. Typography pairing with contrast justification
  4. Key page layouts (ASCII/wireframe)
  5. Component tree with state boundaries
  6. State coverage: loading / empty / error / success / permission
  7. Critique report (or reason for skip)
  8. Quality score and release recommendation
  9. Accessibility checkpoints (contrast, keyboard, semantics)
  10. 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

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
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/northseadl/norix-skills/agent-front-design/badge)](https://verified-skill.com/skills/northseadl/norix-skills/agent-front-design)

Something wrong with this skill or its page? Tell us.