# Frontend Design Direction (frontend-design-direction)

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

- Category: [UI & Interaction](https://www.myskills.tools/en/categories/ui-interaction/)
- Source: Community · Affaan Mustafa
- Repository: https://github.com/affaan-m/ECC/tree/main/skills/frontend-design-direction (commit 1c05119)
- SKILL.md: https://github.com/affaan-m/ECC/blob/main/skills/frontend-design-direction/SKILL.md
- Install command: `npx skills add affaan-m/ECC --skill frontend-design-direction`
- License: MIT
- Compatible with: Claude Code, Codex, Cursor, Copilot, OpenCode
- Permissions: read-repo ✓, write-files ✓, shell ✓, network ✓
- Status: Scan passed
- A rule scan cannot catch every risk. Read this skill's SKILL.md and check its permissions before installing.
- ⚠ The optional UIZZE reference search is an authenticated third-party service, used only with consent and never sent screenshots, code or user data.

## Core rule

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

## Execution Phases

1. **Choose a direction** — Before coding, decide purpose, audience, tone, one memorable detail, and constraints such as framework, accessibility and the existing design system.
2. **Record 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. **Build 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. **Rendered 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. **Run 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)

| Capability | Needed | Details |
|---|---|---|
| File writes | Required | Writes UI code and keeps screenshots and a local JSON evidence record in the workspace. |
| Command execution | Limited | Runs the bundled check-evidence.js and rendering checks; installs no packages without authorization. |
| Network outbound | Limited | Only the optional UIZZE MCP, with user consent, sending only sanitized aggregate design needs. |

## SKILL.md frontmatter (YAML)

```yaml
---
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
---
```

Home: https://www.myskills.tools/en/ · URL: https://www.myskills.tools/en/skills/frontend-design-direction/