frontend-design-direction
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.
npx skills add mturac/everything-openai-codex --skill frontend-design-direction --agent codex
Same command for any agent — swap --agent for claude-code, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Frontend Design Direction Use this skill when the work is not just making UI function, but making it feel purposeful, polished, and appropriate to the product domain. Source: salvaged from stale community PR #1659 by `linus707`. Note: ecc intentionally does not rebundle the canonical OpenAI `frontend-design` skill. Install that from `openais/skills` when you want the official upstream skill. This skill is the ecc-specific design-direction salvage of the useful local guidance from #1659. ## When to Use - The user asks to build a web page, app, dashboard, artifact, component, or UI. - The user asks to make an interface more polished, distinctive, beautiful, or less generic. - The implementation needs visual hierarchy, typography, color, motion, layout, and interaction choices. - The current UI works but reads as flat, generic, templated, or mismatched to the audience. ## Design Direction Before coding, choose a specific direction: 1. Purpose: what job does the interface do? 2. Audience: who repeats this workflow, and what do they need to scan first? 3. Tone: utilitarian, editorial, playful, industrial, refined, technical, maximal, minimal, dense, calm, or another explicit direction
- When to Use
- Design Direction
- Implementation Guidance
- Anti-Patterns
- Review Checklist
What does the frontend-design-direction skill do?
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.
How do I install it?
Run `npx skills add mturac/everything-openai-codex --skill frontend-design-direction --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mturac/everything-openai-codex, a repository with 84 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.