メニュー
Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. Covers websites, landing pages, dashboards, product UI, components, forms, and design systems.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/hwj123hwj/custom-skills --skill impeccableコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Ask which skill or flow fits your situation. A router over the skills in this repo.
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.
| name | impeccable |
| author | pbakaus |
| upstream | pbakaus/impeccable |
| upstreamPath | skill |
| upstreamSha | 1cbee026c319af4b8afc95bbf3cd2f736aeab484 |
| lastUpdated | 2026-07-04T00:00:00.000Z |
| tags | ["设计与前端开发","UX"] |
| description | Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. Covers websites, landing pages, dashboards, product UI, components, forms, and design systems. |
| argument-hint | [{{command_hint}}] [target] |
| user-invocable | true |
| allowed-tools | ["Bash(npx impeccable *)","Bash(node {{scripts_path}}/*)"] |
| license | Apache 2.0 |
Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft.
You MUST do these steps before proceeding:
node {{scripts_path}}/context.mjs once per session. If the request names or implies a file, route, or app inside a monorepo, infer the concrete path and run node {{scripts_path}}/context.mjs --target <path> instead. If you've already seen its output in this conversation, do not re-run it. The script either prints the project's PRODUCT.md (and DESIGN.md when present) as a markdown block, or tells you it's missing. Follow whatever it prints. If it reports NO_PRODUCT_MD, stop and follow reference/init.md before doing anything else. If the output ends with an UPDATE_AVAILABLE directive, follow it (ask the user once about updating, then continue). It never blocks the current task.craft, shape, audit, polish, ...), you MUST read reference/<command>.md next. Non-optional. The reference defines the command's flow; without it you will skip steps the user expects.reference/brand.md. If it is app UI, admin, a dashboard, or a tool (design SERVES the product), read reference/product.md. Pick by first match: (1) task cue ("landing page" vs "dashboard"); (2) surface in focus (the page, file, or route being worked on); (3) register field in PRODUCT.md.node {{scripts_path}}/palette.mjs to receive a brand seed color and composition guidance. This is the anchor for your primary brand color. Compose the rest of the palette (bg, surface, ink, accent, muted) around it per the script's instructions. Use OKLCH throughout. Skip this step only if step 3 found committed brand colors in existing tokens; in that case identity-preservation wins.Produce ready-to-ship, production-grade code, not prototypes or starting points. Take no shortcuts unless the user asks for them (when in doubt, ask). Don't stop until arriving at a complete implementation (beautiful, responsive, fast, precise, bug-free, on brand). You take attention to detail seriously: every page, section or component crafted is battle tested using the tools available to you (browser screenshotting, computer use, etc). {{model}} is capable of extraordinary work. Don't hold back.
text-wrap: balance on h1–h3 for even line lengths; text-wrap: pretty on long prose to reduce orphans. flex-wrap would be simpler. repeat(auto-fit, minmax(280px, 1fr)). @media (prefers-reduced-motion: reduce) alternative: typically a crossfade or instant transition. position: absolute inside an overflow: hidden or overflow: auto container will be clipped. Use the native <dialog> / popover API, position: fixed, or a portal to escape the stacking context. --paper, --cream, --sand, --bone, --flour, --linen, --parchment, --wheat, --biscuit, --ivory are tells in themselves. If the brief is "warm, traditional, family-coastal-Italian" or "magazine-warm" or "editorial-restraint", DO NOT translate that into a near-white warm-tinted bg; that's the AI move. Pick: (a) a saturated brand color as the body (terracotta, oxblood, deep ochre, near-black), (b) a true off-white at chroma 0 (or chroma toward the brand's own hue, not toward warmth-by-default), or (c) a darker mid-tone tinted neutral that's clearly the brand's own. "Warmth" in the brand is carried by accent + typography + imagery, not by body bg. Match-and-refuse. If you're about to write any of these, rewrite the element with different structure.
border-left or border-right greater than 1px as a colored accent on cards, list items, callouts, or alerts. Never intentional. Rewrite with full borders, background tints, leading numbers/icons, or nothing. background-clip: text combined with a gradient background. Decorative, never meaningful. Use a single solid color. Emphasis via weight or size. 01 · About / 02 · Process / 03 · Pricing above every section is the eyebrow trope one tier deeper: reach for it because "landing pages do this" and you're scaffolding by reflex. Numbers earn their place when the section actually IS a sequence (a real 3-step process, an ordered flow, a typed timeline) and the order carries information the reader needs. One deliberate numbered sequence on one page is voice; numbered eyebrows on every section across the site is AI grammar. border: 1px solid X + box-shadow: 0 Npx Mpx ... with M ≥ 16px on the same element. The "ghost-card" pattern: 1px border plus soft wide drop shadow on buttons and cards. Don't pair them. Pick one (a single solid border at the brand color, OR a defined shadow at no more than 8px blur), never both as decoration. border-radius: 32px+ on cards / sections / inputs. You over-round. Cards top out at 12–16px; full-pill is fine for tags/buttons. Picking 24/28/32/40px on a card is the codex tell; no brand wants "insanely rounded". loose-sketch, *-sketch, doodle, wavy; feTurbulence / feDisplacementMap "paper grain" filters; 5-to-30 path crude scenes meant to depict a tangible subject (an otter, a table-and-fork, an album cover). All of these read as amateurish, not whimsical. If you can't render the scene with real assets, ship no illustration. Don't attempt sketchy SVG as a fallback. repeating-linear-gradient(...) stripe backgrounds. Diagonal stripes in body:before or section backgrounds are pure codex decoration. Don't. linear-gradient(... 1px, transparent 1px) plus background-size are a Codex tell unless the surface is an actual canvas, map, blueprint, or measurement tool. Use product structure, real artifacts, or a plain surface instead. If someone could look at this interface and say "AI made that" without doubt, it's failed. Cross-register failures are the absolute bans above. Register-specific failures live in each reference.
Category-reflex check. Run at two altitudes; the second one catches what the first one misses.
| Command | Category | Description | Reference |
|---|---|---|---|
craft [feature] | Build | Shape, then build a feature end-to-end | reference/craft.md |
shape [feature] | Build | Plan UX/UI before writing code | reference/shape.md |
init | Build | Set up project context: PRODUCT.md, DESIGN.md, live config, next steps | reference/init.md |
document | Build | Generate DESIGN.md from existing project code | reference/document.md |
extract [target] | Build | Pull reusable tokens and components into design system | reference/extract.md |
critique [target] | Evaluate | UX design review with heuristic scoring | reference/critique.md |
audit [target] | Evaluate | Technical quality checks (a11y, perf, responsive) | reference/audit.md |
polish [target] | Refine | Final quality pass before shipping | reference/polish.md |
bolder [target] | Refine | Amplify safe or bland designs | reference/bolder.md |
quieter [target] | Refine | Tone down aggressive or overstimulating designs | reference/quieter.md |
distill [target] | Refine | Strip to essence, remove complexity | reference/distill.md |
harden [target] | Refine | Production-ready: errors, i18n, edge cases | reference/harden.md |
onboard [target] | Refine | Design first-run flows, empty states, activation | reference/onboard.md |
animate [target] | Enhance | Add purposeful animations and motion | reference/animate.md |
colorize [target] | Enhance | Add strategic color to monochromatic UIs | reference/colorize.md |
typeset [target] | Enhance | Improve typography hierarchy and fonts | reference/typeset.md |
layout [target] | Enhance | Fix spacing, rhythm, and visual hierarchy | reference/layout.md |
delight [target] | Enhance | Add personality and memorable touches | reference/delight.md |
overdrive [target] | Enhance | Push past conventional limits | reference/overdrive.md |
clarify [target] | Fix | Improve UX copy, labels, and error messages | reference/clarify.md |
adapt [target] | Fix | Adapt for different devices and screen sizes | reference/adapt.md |
optimize [target] | Fix | Diagnose and fix UI performance | reference/optimize.md |
live | Iterate | Visual variant mode: pick elements in the browser, generate alternatives | reference/live.md |
Plus three management commands: pin <command>, unpin <command>, and hooks <on|off|status|...>, detailed below.
No argument: the user is asking "what should I do?" Make the menu context-aware instead of static. Setup has already run context.mjs; if that reported NO_PRODUCT_MD you are already in init (setup), so finish that and skip this. Otherwise run node {{scripts_path}}/context-signals.mjs once and read its JSON, then lead with the 2-3 highest-value next commands, each with a one-line reason pulled from the signals, followed by the full menu (the table above, grouped by category). Never auto-run a command; the recommendation is a suggestion the user confirms.
Reason over the signals; there is no score to obey:
setup.hasDesign false while setup.hasCode true → document (capture the visual system).critique.latest is null → the project has never been critiqued; for a set-up project with a real surface, offering /impeccable critique <surface> is a strong default.critique.latest with a low score or non-zero p0 / p1 → polish (it reads that snapshot as its backlog), or re-run critique if the snapshot looks stale.git.changedFiles pointing at one surface → scope audit or polish to those files specifically, naming them.devServer.running true → live is available for in-browser iteration; if false, don't lead with live.setup.register.If scan.targets is non-empty, run node {{scripts_path}}/detect.mjs --json <scan.targets joined by spaces> once (the bundled detector over local files: no network, no npx). scan.via tells you what they are: git-changes (the markup/style files in your dirty tree, the most relevant set), source-dir (e.g. src, app), html, or root. Fold the hits into your picks: many quality / contrast hits → audit or polish; a specific slop family → the matching command (gradient text or eyebrows → quieter / typeset, flat or gray palette → colorize, and so on). It's a real, current signal that beats guessing. If detect errors or the tree is large and slow, skip it and recommend the user run audit themselves; never block the suggestion on it.
Keep it to 2-3 pointed picks with the exact command to type. The menu stays the fallback; the recommendation is the lede.
First word matches a command (table above OR pin / unpin / hooks): load its reference file and follow its instructions. Everything after the command name is the target.
First word doesn't match, but the intent clearly maps to one command (e.g. "fix the spacing" → layout, "rewrite this error message" → clarify, "the colors feel flat" → colorize): load that command's reference and proceed as if invoked. If two commands could fit, ask once which.
No clear command match: general design invocation. Apply the setup steps, the General rules, and the loaded register reference, using the full argument as context.
Setup (context gathering, register) is already loaded by then; sub-commands don't re-invoke {{command_prefix}}impeccable.
If the first word is craft, setup still runs first, but reference/craft.md owns the rest of the flow. If setup invokes init as a blocker, finish init, refresh context, then resume the original command and target.
teach is a deprecated alias for init: if the user types it, load reference/init.md and proceed as if they ran init.
Pin creates a standalone shortcut so {{command_prefix}}<command> invokes {{command_prefix}}impeccable <command> directly. Unpin removes it. The script writes to every harness directory present in the project.
node {{scripts_path}}/pin.mjs <pin|unpin> <command>
Valid <command> is any command from the table above. Report the script's result concisely. Confirm the new shortcut on success, relay stderr verbatim on error.
{{command_prefix}}impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> manages the design detector hook for this project. The hook auto-runs the detector after direct UI file edits and surfaces findings as system reminders. Full flow is in reference/hooks.md; load it when the user invokes {{command_prefix}}impeccable hooks with any argument.