Part of the quantum-loop autonomous development pipeline (brainstorm \u2192 spec \u2192 plan \u2192 execute \u2192 review \u2192 verify). Deep Socratic exploration of a feature idea before implementation. Asks questions one at a time, proposes 2-3 alternative approaches with trade-offs, presents design section-by-section for approval, and saves an approved design document. Use when starting a new feature, exploring an idea, or before writing a spec. Triggers on: brainstorm, explore idea, design this, think through, ql-brainstorm.
将用户想法转化为可确认的 design 文档并落盘。用于头脑风暴、新功能/需求定义、需求澄清、写 design/PRD 之前；在开始任何实现（写代码/改配置/改行为）前应先使用此流程。
- 📁 docs/
- 📁 references/
- 📁 scripts/
- 📄 README.md
- 📄 SKILL.md
Implement responsive design for websites and web apps — from standard mobile-first layouts to complex patterns (sticky elements, scroll coordination, data tables, dashboards). Three modes: transform existing sites, build responsive from scratch, or launch a live multi-breakpoint preview. Surfaces design forks where there's no single right answer. Use when building responsive layouts, fixing mobile issues, adding breakpoints, working with sticky/scroll patterns, previewing breakpoints, or when the user mentions responsive, mobile, breakpoints, viewport, adaptive design, or responsive preview.
- 📁 references/
- 📄 LICENSE
- 📄 SKILL.md
Decision guide for antd 6.x, Ant Design Pro 5/ProComponents, Ant Design X v2, and the offline `@ant-design/cli`. Use for component selection, theming/tokens, SSR, a11y, performance, routing/access/CRUD, AI/chat UI patterns, local API lookup, debugging, migration, and usage analysis.
- 📁 references/
- 📄 .gitignore
- 📄 README.md
- 📄 README_EN.md
Production-grade Agent development methodology extracted from Claude Code. 7-dimension framework covering tool design, system prompts, permission & safety, multi-agent orchestration, token economy, memory/state, and extensibility. Supports architecture design, implementation guidance, and agent review. Trigger on "Agent design", "build an agent", "AI agent", "tool design", "system prompt architecture", "agent review", "multi-agent", or any agent development concern.
Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidance for layout, typography, color, motion, accessibility, dashboards, tables, landing pages, theming, and polish. Trigger when editing UI code or reviewing and refining components, pages, screens, layouts, animations, responsive behavior, or design systems.
Interactive deck design consultant that guides users through structured Q&A to plan a new DexCode slide deck before building it. Gathers purpose, audience, content outline, and design preferences through conversation, then outputs a structured brief document and deck.config.ts parameters. Use when user says "デッキを設計", "deck design", "プレゼンの企画", "壁打ち", "アウトラインを考えて", "新しいデッキの相談", "plan a deck", "help me design a presentation", "brainstorm deck", or "スライドの構成を考えて".
- 📁 assets/
- 📁 references/
- 📁 scripts/
- 📄 SKILL.md
API design patterns for REST, gRPC, and GraphQL. Use for: api design, REST, gRPC, GraphQL, protobuf, schema design, api versioning, pagination, rate limiting, error format, OpenAPI, API authentication, JWT, OAuth2, API gateway, webhook, idempotency.
Use when a Codex task involves UI design, Figma, design systems, shadcn/ui, Tailwind, Atomic Design, research synthesis, component specs, design audits, or design-to-code generation.
- 📁 data/
- 📁 scripts/
- 📄 SKILL.md
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
- 📁 references/
- 📁 scripts/
- 📄 SKILL.md
Designer role. Reads outline, generates a single HTML presentation file with CSS design system + JS slide engine + per-slide content. Accepts visual references (URLs, screenshots, design specs) and extracts design signals to inform the isomorphic mapping. Use whenever the user says "design slides", "generate deck", "generate the deck", "build slides", "visual style", "reference this style", "like this design", "design", "generate slides", "visual style", "reference this style", or wants to turn an outline into actual slides. --- # codeck design ## Role activation Read `$DECK_DIR/diagnosis.md` for the recommended design role and its structural mapping. You are that person. Their formal logic — how they organize space, tension, rhythm — becomes your visual logic. The role is chosen for structural match, not domain: > Content builds layer by layer, each page adding complexity → Ravel (Bolero): visual simplicity to richness, color gradually saturates, each page adds one element. > > Content driven by contrast and opposing forces → Caravaggio: high-contrast lighting, black-white dominant, accent color used sparingly like a decisive stroke. > > Content strips away noise to reveal one truth → Dieter Rams: remove everything unnecessary, final slide is the emptiest and most powerful. Apply their formal logic directly. Don't explain their principles — embody them in every visual choice. If `diagnosis.md` doesn't exist, use AskUserQuestion or recommend running `/codeck` first. ## AskUserQuestion format 1. **Re-ground** — "codeck design, {current step}" 2. **Simplify** — plain language 3. **Recommend** — suggestion + reason 4. **Options** — choices Only state verified facts. For unrendered results, say "will" not "is". ## Setup ```bash DECK_DIR="$HOME/.codeck/projects/$(basename "$(pwd)")" mkdir -p "$DECK_DIR" bash "$HOME/.claude/skills/codeck/scripts/status.sh" "$DECK_DIR" ``` Read `$DECK_DIR/outline.md` — page structure, content points, user intent, note to designer. Read `$D
- 📁 assets/
- 📁 evals/
- 📁 examples/
- 📄 SKILL.md
Apply web animation principles from Animation at Work by Rachel Nabors. Covers human perception of motion, 12 principles of animation, animation patterns (transitions, supplements, feedback, demonstrations, decorations), CSS transitions, CSS animations, Web Animations API, SVG/Canvas/WebGL, communicating animation with storyboards and motion comps, performance (composite-only properties, will-change, RAIL), accessibility (prefers- reduced-motion, vestibular disorders), and team workflow. Trigger on "animation", "transition", "CSS animation", "keyframe", "easing", "motion design", "web animation", "prefers-reduced-motion", "storyboard", "parallax", "loading animation", "hover effect", "micro-interaction". --- # Animation at Work Skill You are an expert web animation advisor grounded in the 5 chapters from *Animation at Work* by Rachel Nabors. You help in two modes: 1. **Design Application** — Apply animation principles to create purposeful, performant web animations 2. **Design Review** — Analyze existing animations and recommend improvements ## How to Decide Which Mode - If the user asks to *create*, *add*, *implement*, *animate*, or *build* animations → **Design Application** - If the user asks to *review*, *audit*, *evaluate*, *optimize*, or *fix* animations → **Design Review** - If ambiguous, ask briefly which mode they'd prefer --- ## Mode 1: Design Application When helping create animations, follow this decision flow: ### Step 1 — Classify the Animation's Purpose Every animation must have a clear purpose. Classify using these five patterns: | Pattern | Purpose | When to Use | Example | |---------|---------|-------------|---------| | **Transition** | Show state change between views/states | Navigating pages, opening panels, switching tabs | Page slide-in, modal open/close | | **Supplement** | Bring elements into/out of a view that's already in place | Adding items to lists, showing notifications, revealing content | Toast notification slide-in, list item appear
