본문으로 건너뛰기
cccskills
무료GitHub에 공개

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

tensology/decisionsai
설치 방법 보기

포함된 파일(1)

  • SKILL.md4.2 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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

  • Build the actual usable experience as the first screen unless the user explicitly asks for marketing copy.
  • Use existing project components, tokens, icon libraries, and routing patterns before introducing a new visual system.
  • Use real or generated visual assets when the interface depends on images, products, places, people, gameplay, charts, or inspectable media.
  • Prefer contextual typography and spacing over generic oversized hero text.
  • Keep palettes multi-dimensional: avoid a UI dominated by one hue family.
  • Use CSS variables or existing design tokens so the direction remains coherent across states.
  • Design responsive constraints explicitly: grids, aspect ratios, min/max sizes, stable toolbars, and fixed-format controls should not shift when labels or hover states appear.
  • Use motion sparingly but deliberately. Prefer high-signal transitions that clarify state over decorative animation.
  • Verify text fit on mobile and desktop. Long labels must wrap or resize cleanly rather than overflowing.

Anti-Patterns

  • Do not default to common generated patterns: purple gradients, decorative blobs, oversized cards, vague hero copy, or stock-like atmospheric media.
  • Do not add UI cards inside other cards.
  • Do not use a single decorative style everywhere when the domain calls for restraint.
  • Do not hide the primary product, tool, object, or workflow behind generic marketing sections.
  • Do not add a new dependency for a design flourish unless it clearly pays for itself.
  • Do not describe the UI's features inside the UI when the controls can speak for themselves.

Review Checklist

  • The first viewport immediately communicates the product, workflow, or object.
  • The visual hierarchy supports scanning and repeated use.
  • Typography fits the container and does not overlap adjacent content.
  • Color choices have contrast and do not collapse into a one-note palette.
  • Icons are used for familiar tool actions where available.
  • Responsive layout has stable dimensions for boards, grids, toolbars, controls, tiles, and counters.
  • Assets render and carry the subject matter instead of acting as filler.
  • Motion improves orientation and does not mask sluggishness.
  • The result matches the repo's existing frontend conventions unless there is a clear reason to depart.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

accessibility

무료

Design, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards. Use this skill to generate semantic ARIA for Web and accessibility traits for Web and Native platforms (iOS/Android).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

tensology/decisionsai172026년 10월 21일 업데이트

accessibility-audit

무료

Whole site or product — a full web accessibility (a11y) audit against WCAG 2.2, following the WCAG-EM methodology. Defines scope, samples representative pages and flows, runs the automated tier (`accessibility-scan`) and the hands-on manual tier (`accessibility-inspect`), and produces one conformance report. Grades each finding by severity and evidence basis, and states per-criterion conformance as pass, fail, or undetermined (needs a human). Use it for 'audit my site for accessibility', 'is this product accessible', 'a11y audit', 'WCAG or Section 508 conformance report', or any multi-page assessment. Assesses; does not fix (use `accessibility-fix`) or diff (use `accessibility-diff`). For a single page use `accessibility-scan`; for hands-on keyboard and screen-reader checks use `accessibility-inspect`.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

tensology/decisionsai172026년 10월 21일 업데이트

accessibility-diff

무료

Regression check — diff a live page's web accessibility (a11y) violations against a baseline. By default it compares your uncommitted changes (stash-based); pass `--branch [<name>]` to compare against a branch. Reports the new WCAG violations introduced, the ones fixed, and the count of pre-existing ones. Use it for 'did my change break accessibility', 'what a11y issues did this PR add', or as a CI gate. For a full scan of one page use `accessibility-scan`; for a whole site use `accessibility-audit`.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

tensology/decisionsai172026년 10월 21일 업데이트

accessibility-fix

무료

Remediation only — repair web accessibility (a11y) violations against WCAG 2.2 with a baseline, edit, and verify loop. Takes a target (URL, files, directory) or a findings worklist from `accessibility-scan`/`accessibility-inspect`/`accessibility-audit`, applies mechanical fixes as given, leaves TODOs for visual or contextual judgment, and verifies by re-running the baseline check. It only fixes. To find issues use `accessibility-scan` (one page, automated), `accessibility-inspect` (one page, manual), or `accessibility-audit` (whole site, WCAG-EM); to check for regressions use `accessibility-diff`. Use it for 'fix the a11y issues in X', 'make this accessible', 'add missing alt text and labels', 'apply these accessibility fixes', 'remediate these violations'.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

tensology/decisionsai172026년 10월 21일 업데이트

accessibility-inspect

무료

One page, hands-on manual tier — drive a live page through the web accessibility (a11y) checks a rule engine can't decide: keyboard operation and focus order, screen-reader names, roles and states from the accessibility tree, reflow and zoom, reduced motion, form errors, and target size. Grades each finding by evidence basis (verified / confirm-with-a-human / human-required) and severity, and closes every criterion in a ledger: verified, flagged, not exercised, or N/A. Locates and assesses; does not fix (use `accessibility-fix`). Use it for keyboard testing, focus-order checks, screen-reader or a11y-tree review, reflow and zoom at 200%, or 'is this operable, not just lint-clean'. The automated tier is `accessibility-scan`; `accessibility-audit` runs both across a sampled site.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

tensology/decisionsai172026년 10월 21일 업데이트

accessibility-scan

무료

One page, automated tier — run the web accessibility (a11y) rule engine against a live page and locate every violation it can detect mechanically. Pass a URL, a config target name (e.g. `accesslint:accessibility-scan dev`), or nothing to use the default target from `accesslint.config.json`. Ensures a debuggable Chrome, runs the @accesslint/core engine over CDP, and returns a worklist of live-DOM WCAG 2.2 violations, each grounded to its DOM selector and source `file:line`. Locates; doesn't edit. Use it for 'is this page accessible', 'check a11y on this URL', 'find contrast and alt-text issues', or to verify a UI change. For hands-on keyboard and screen-reader checks use `accessibility-inspect`; for a whole site or product use `accessibility-audit`; to diff against uncommitted changes or a branch use `accessibility-diff`.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

tensology/decisionsai172026년 10월 21일 업데이트

tensology의 스킬 모두 보기

이 스킬의 문제 신고