Agent skill · design visual · affaan-m
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.
Why this skill is useful
Provides specific design principles and guidelines tailored for ECC's frontend needs, enhancing the AI's ability to create domain-appropriate UIs.
What it needs
About 5k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.
What this skill does
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 Anthropic frontend-design skill. Install that from anthropics/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. 4. Memorable detail: one design idea that makes the result feel intentional. 5. Constraints: framework, accessibility, performance, responsiveness, and existing design system. Match the direction to the domain. A SaaS operations tool should usually be dense, quiet, and scannable. A portfolio, launch page, game, or editorial piece can be more expressive. Do not force a landing-page composition onto a tool that needs repeated daily use. Implementation Guidance Evidence contract and content states Before implementation, record the product surface, user's job, primary action, hierarchy, target viewports and the reference observation behind each important choice. Make these constraints checkable; a palette alone is not evidence. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/frontend-design-direction--de53ba