Skills DirectoryCurated open-source Skills from GitHub
English

frontend-design-directioncommit 1c05119SKILL.md · UI & Interaction

Frontend Design Direction

Sets a product-specific design direction before building production UI, then checks accessibility, responsiveness and content states as rendered.

The optional UIZZE reference search is an authenticated third-party service, used only with consent and never sent screenshots, code or user data.

npx skills add affaan-m/ECC --skill frontend-design-direction
Permissions
  • read-repo
  • write-files
  • shell
  • network
Compatible with
Claude Code, Codex, Cursor, Copilot, OpenCode
GitHub
294.3k
Source
Community · Affaan Mustafa
Status
Scan passed
License
MIT
Category
UI & Interaction
Repository
github.com/affaan-m/ECC/skills/frontend-design-direction

Core rule

Source inspection alone cannot pass the rendered finish gate; report untested work instead of fabricating evidence.

Execution Phases

  1. Phase 01Choose a direction

    Before coding, decide purpose, audience, tone, one memorable detail, and constraints such as framework, accessibility and the existing design system.

  2. Phase 02Record the evidence contract

    Record the primary action, hierarchy, target viewports and the reference behind each choice, plus trigger and feedback for loading, empty, error, partial, success and permission states.

  3. Phase 03Build from the contract

    Reuse existing components, tokens and icon libraries, keep the direction coherent with CSS variables, and avoid stock patterns like purple gradients or cards inside cards.

  4. Phase 04Rendered finish gate

    At each target viewport, check keyboard navigation, visible focus, labels, contrast, reduced motion and touch targets, exercise each content state, and fix failures.

  5. Phase 05Run the evidence checker

    Write screenshots and observations into a local JSON evidence record and validate it with the bundled node scripts/check-evidence.js.

Permissions (summarised from SKILL.md)

CapabilityNeededDetails
File writesRequiredWrites UI code and keeps screenshots and a local JSON evidence record in the workspace.
Command executionLimitedRuns the bundled check-evidence.js and rendering checks; installs no packages without authorization.
Network outboundLimitedOnly the optional UIZZE MCP, with user consent, sending only sanitized aggregate design needs.

SKILL.md frontmatter (YAML)

SKILL.md frontmatter (YAML)commit 1c05119
---
name: frontend-design-direction
description: Set an ECC-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pages, visual tools, or any web UI that needs stronger product-specific design judgment.
metadata:
  origin: community
---

Related skills

A rule scan cannot catch every risk. Read this skill's SKILL.md and check its permissions before installing.
Markdown version GitHub