菜单
Plan a new feature before coding. Use when starting non-trivial UI work, new components, or features with hidden complexity. Gathers context, explores architecture, and slices work into PRs.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.
Apply the "Family Values" design philosophy to every UI you build. Use this skill whenever creating frontends, components, apps, landing pages, dashboards, or any user-facing interface. Enforces three core principles — Simplicity (gradual revelation), Fluidity (seamless transitions), and Delight (selective emphasis) — so that every output feels crafted, intentional, and alive. Prevents generic, static, lifeless UI. Works alongside other skills like frontend-design, web-animation-design, etc.
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
Interface Craft by Josh Puckett — a toolkit for building polished, animated interfaces in React. Includes Storyboard Animation (human-readable animation DSL with stage-driven sequencing), DialKit (live control panels for tuning animation values), and Design Critique (systematic UI review based on Josh Puckett's methodology). Triggers on: animate, animation, transition, storyboard, entrance, motion, spring, easing, timing, dialkit, sliders, controls, tune, tweak, critique, review, feedback, audit, improve, polish, refine, redesign.
Maggie's personal design philosophy — minimalist, progressive, and dynamic. Use when designing or reviewing UI components, pages, or interactions to keep the interface spare, let users learn by doing, and favour live, animated, progressively-disclosed components over labelled and static ones.
Break a PRD into independently-grabbable GitHub issues using tracer-bullet vertical slices. Use when user wants to convert a PRD to issues, create implementation tickets, or break down a PRD into work items.
| name | feature-kickoff |
| description | Plan a new feature before coding. Use when starting non-trivial UI work, new components, or features with hidden complexity. Gathers context, explores architecture, and slices work into PRs. |
| metadata | {"trigger":"Starting a new feature, building a new UI component, kicking off non-trivial work","author":"Maggie Appleton"} |
A structured planning phase before any code gets written. Designed to surface complexity early, make architectural decisions deliberately, and keep PRs small.
Before proposing anything, ask the user for:
Do NOT proceed until you have at least the current state and end state clearly understood.
Once context is gathered:
Present a short summary of discovered complexity to the user. Flag anything that might change the scope.
Propose 2-3 approaches with clear tradeoffs. For each:
Keep proposals concise. Use bullet points, not essays. Ask the user to pick one or discuss.
After agreeing on an approach, break the work into vertical slices. Each slice should be:
Present the slices as a numbered list with a one-line description of what each PR delivers.
Only now begin coding. Start with slice 1. Refer back to the agreed plan if scope starts creeping.
If unrelated issues are noticed during implementation, add them to a parking lot list instead of fixing them inline. Remind the user to file these separately.
