anthropics/skills180kfrontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
前端开发
Structured divergent thinking techniques — HMW framing, SCAMPER, Crazy 8s mechanics, and option diversity guarantees. Enforces strict separation of generation and evaluation phases.
把这段话发给 Claude Code、Codex 或 Cursor。智能体会先检查安全性,你确认后才安装。
读取 https://funcoding.ai/skills/nwave-ai/nwave/nw-brainstorming/install.md ,按里面的步骤帮我安装这个 Skill。
Generation and evaluation CANNOT happen simultaneously. Osborn (1953): "You cannot get hot and cold water from the same faucet at the same time — you only get tepid water."
Consequence for the agent: All options must be generated before any option is scored. Never filter or rank during generation. Self-censorship during generation degrades both the quality of ideas and the quality of evaluation.
Before generating any options, reframe the problem as a "How Might We" question.
Rules for valid HMW questions:
Example transformation:
The good HMW opens the solution space: the answer isn't necessarily a dashboard.
Apply each SCAMPER lens to the validated job to generate one option per letter. This guarantees structural diversity — each letter produces a categorically different type of option.
| Letter | Lens | Question | What it produces |
|---|---|---|---|
| S | Substitute | What if the core mechanism were replaced entirely? | Alternative technology/approach |
| C | Combine | What if this job were merged with an adjacent job? | Integrated solution |
| A | Adapt | What works well in a different domain? Could we borrow it? | Cross-domain transfer |
| M | Modify/Magnify | What if the most important dimension were amplified? | Focused excellence |
| P | Put to other use | Who else has this job? Could the solution serve them too? | Market extension |
| E | Eliminate | What if we removed the most complex part? | Radical simplification |
| R | Reverse | What if the workflow ran backwards? User and system switched roles? | Inversion |
Required output: At minimum, one option per SCAMPER letter. Name each option clearly. Do not evaluate during generation.
After SCAMPER, generate 2-4 additional options by imagining you have only 1 minute per idea. The time pressure mechanic prevents evaluation creep.
Constraint: Each additional option must differ structurally from all SCAMPER options. Not a variation — a different type of approach.
Before handing off to taste evaluation:
Diversity test — each of the 6 options should answer yes to:
If two options share all three, they are variations — merge them.
Each option in options-raw.md must follow:
### Option N: [Name]
**Core idea**: One sentence — what would a user actually experience?
**Key mechanism**: What makes this work?
**Key assumption**: What must be true for this to succeed?
**SCAMPER origin**: Which lens generated this? (or "Crazy 8s supplement")
**Closest competitor**: What existing product does this most?
| Anti-pattern | Why it fails | Correction |
|---|---|---|
| Generating one good idea and elaborating it | Confirmation bias — narrows too early | Apply all SCAMPER letters before stopping |
| "Improved version of the existing approach" | Not divergent — variation, not option | Apply E (Eliminate) or R (Reverse) |
| Filtering during generation ("that won't work") | Destroys divergent thinking | Generate everything, filter in taste phase |
| Options that share the same core mechanism | False diversity | Apply diversity test before curating |
| Skipping HMW framing | Solution space collapses prematurely | HMW must precede any generation |
Produce docs/feature/{feature-id}/diverge/options-raw.md with:
Gate: 6 curated options, each passing the 3-point diversity test, before taste evaluation begins.
anthropics/skills180kGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
前端开发
anthropics/skills180kSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
前端开发
addyosmani/agent-skills103kGuides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.
前端开发
addyosmani/agent-skills103kBuilds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
前端开发
addyosmani/agent-skills103kOptimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.
前端开发
nexu-io/open-design100kOpenDesign's feature business case for the plugin marketplace: the user pain, options, tradeoffs, and the measure of success. Built as a decision-grade product management deck for PM, eng, design, leadership.
前端开发