Design skills

Design guide + benchmarked pitfalls for building Monte-Carlo / Simulated Annealing refinement layers on top of greedy hex-grid layouts for code visualization (packages/gui/src/store/hexLayout.ts, sandbox/hex-sandbox, future Rust ports). Use when: (1) planning to add MC/SA on top of an existing hex-grid pack, (2) deciding whether a simpler SA would match a hierarchical MC with force-directed + chain drag, (3) budgeting wall-clock for million-node cold-start, (4) debugging "blob turns Swiss-cheese" or "folders stop nucleating" during MC refinement, (5) choosing between folder cohesion and raw Σ-link-length as cost function. Contains four hard-won, quantified lessons and anti-patterns that would take a full day of experiments to rediscover.

The English summary is being prepared. Showing the original description.

Use when generating, vectorizing, or converting images to SVG — logos, icons, illustrations, or 'allow1'/'quiver' references.

The English summary is being prepared. Showing the original description.

Builds UI components, landing page sections, hero sections, and contact forms. Use when creating front-end visual elements.

The English summary is being prepared. Showing the original description.

品牌無關的 IG/Threads/X/FB 圖卡引擎——把任何主題（idea / 文章 / 教學）變成輪播圖卡 + 4 平台文案。HTML+CSS 模板 → Chrome headless 渲染 PNG。風格由 brand pack 決定（brands/），接哪個 pack 出哪個風格，引擎不綁死品牌。觸發詞：做圖卡、生 carousel、social card、IG 圖卡、Threads 卡片、貼文文案、教學圖卡、infographic、輪播圖、carousel post。

The English summary is being prepared. Showing the original description.

Designer's eye plan review — interactive, like CEO and Eng review. Rates each design dimension 0-10, explains what would make it a 10, then fixes the plan to get there. Works in plan mode. For live site visual audits, use /design-review. Use when asked to "review the design plan" or "design critique".

The English summary is being prepared. Showing the original description.

Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview pages. Creates DESIGN.md as your project's design source of truth. For existing sites, use /plan-design-review to infer the system instead. Use when asked to "design system", "brand guidelines", or "create DESIGN.md".

The English summary is being prepared. Showing the original description.

YC Office Hours — two modes. Startup mode: six forcing questions that expose demand reality, status quo, desperate specificity, narrowest wedge, observation, and future-fit. Builder mode: design thinking brainstorming for side projects, hackathons, learning, and open source. Saves a design doc. Use before /plan-ceo-review or /plan-eng-review.

The English summary is being prepared. Showing the original description.

Before any material decision — code chunk, plan, strategy, design, scope cut, push to GitHub — convene a war-room. The session driver takes the CEO seat: frame the tradeoff, summon specialist seats from whatever agent roster the user has built, dispatch a cross-family voice via `ato dispatch` so priors actually disagree, decide. A failure-mode filter (wrong assumptions / overcomplexity / orthogonal edits / imperative-over-declarative — Karpathy's four are one good default, swap in your own) runs on every dispatch. Place in the v2.16 stack: war-rooms DECIDE before code starts; `ato-mission` EXECUTES the work between decisions (multi-step, goal-driven, persisted across days); `ato-review` VERIFIES the resulting commits. Use a war-room for the design verdict, hand the verdict to a Mission, review the merged result. Fires before: sending a code draft to the user as final, opening a PR, pushing to a remote-tracking branch, committing >50 LOC of behavior change, or delivering a plan or strategic recommendation as the final answer.

The English summary is being prepared. Showing the original description.

Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots. For plan-mode design review (before implementation), use /plan-design-review. Use when asked to "audit the design", "visual QA", "check if it looks good", or "design polish".

The English summary is being prepared. Showing the original description.

Design, audit, or correct an electronic circuit from a product brief, native schematic, netlist, block diagram, or circuit description. Use for architecture and component-function review, power and logic-domain checks, reset and boot sequencing, bus ownership, ratings, timing, protection, safe states, component suitability, circuit bugs, or layout-facing electrical constraints.

The English summary is being prepared. Showing the original description.

Редактирует русский текст по инфостилю Ильяхова. Убирает стоп-слова, штампы, канцеляризмы, голословные утверждения. Заменяет конкретикой: фактами, цифрами, пользой. Адаптирует строгость под контекст: UI, лендинги, email, статьи, саппорт. Вызывай, когда пользователь просит отредактировать, улучшить, вычистить или проверить русский текст. Also triggers on: edit Russian text, improve copy, review UX writing, fix marketing text, rewrite landing page, clean up email.

The English summary is being prepared. Showing the original description.

Apply StyleKit visual styles and public assets when building, restyling, or reviewing UI. Use for named StyleKit styles, visual direction, mobile interface patterns, and component-library selection; preserve the target platform and existing product behavior.

The English summary is being prepared. Showing the original description.

Spec-driven development workflow. Interactive phase-by-phase confirmation from proposal to implementation. Trigger: 'spec-flow', 'spec mode', 'need a plan', 'structured development', 'write a spec', 'feature spec', 'technical spec', '需求文档', '技术方案', '任务拆解', '规格驱动', '写个方案', '做个规划', '结构化开发', 'plan this feature', 'break this down', 'design doc'. Creates .spec-flow/ directory with proposal, requirements, design, and tasks.

The English summary is being prepared. Showing the original description.

Design and visually validate implementation-agnostic website pages or modules from an approved Design System and confirmed content. Use for Module Design Solutions, Page UI Architecture Maps, media, evidence, page motion budgets, section motion intent, visual-direction images, and direction review before HTML. Do not use to write or review HTML/CSS/JS, run browser implementation QA, plan platform fields, or implement CMS components.

The English summary is being prepared. Showing the original description.

Create or evolve an implementation-agnostic website design system from existing-site evidence, verified brand inputs, and an optional Visual Reference Brief. Use to establish visual and restrained-motion baselines, extract an existing site's rendered system for style-preserving extensions, validate one selected baseline with a compact Design Board, or update shared rules before page/module design. Do not conduct cross-industry reference research, map Elementor settings, create page layouts, design modules, or implement production code.

The English summary is being prepared. Showing the original description.

Coordinate the custom Elementor Widget site workflow for kickoff, lightweight company intake, conditional reference research, new-versus-existing site style routing, uncertain next steps, project resumption, or continuous work across content, Design Systems, UI, HTML, and Widget implementation. Do not use for release, old-Widget troubleshooting, theme development, or remote WordPress management.

The English summary is being prepared. Showing the original description.

Use when writing, reviewing, refactoring, or modernizing CSS/Tailwind. Apply a policy-first approach: semantic tokens, explicit cascade order, static CSS, intrinsic component layouts, accessible state, measured performance, and progressive enhancement backed by current sources.

The English summary is being prepared. Showing the original description.

Turn a monitoring wish in plain language into a deterministic watcher rule tree.

The English summary is being prepared. Showing the original description.

Build throwaway HTML mockups so the user can compare design variants.

The English summary is being prepared. Showing the original description.

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations. Use when: (1) creating a new SKILL.md, (2) initializing a skill directory, (3) packaging a .skill file, (4) improving or iterating on an existing skill, (5) understanding skill best practices and design patterns.

The English summary is being prepared. Showing the original description.

Build React animations with Motion (Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG. Bundle: 2.3 KB (mini) to 34 KB (full). Use when: drag-and-drop, scroll animations, modals, carousels, parallax. Troubleshoot: AnimatePresence exit, list performance, Tailwind conflicts, Next.js "use client".

The English summary is being prepared. Showing the original description.

This skill is for interface design — dashboards, admin panels, apps, tools, and interactive products. NOT for marketing design (landing pages, marketing sites, campaigns).

The English summary is being prepared. Showing the original description.

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

The English summary is being prepared. Showing the original description.

Use Kanpeki component library in React projects. Activate when user wants to add, use, customize, or compose accessible UI components from Kanpeki (@kanpeki/*). Triggers: shadcn CLI, copy-paste components, Field.Root, composeRenderProps, ~/components/ui/*, React Aria Components + Tailwind CSS 4.1 + CVA. Covers installation, component patterns, forms (React Hook Form, TanStack Form), theming, and dark mode.

The English summary is being prepared. Showing the original description.