Reorganize: Move all skills to skills/ folder
- Created skills/ directory - Moved 272 skills to skills/ subfolder - Kept agents/ at root level - Kept installation scripts and docs at root level Repository structure: - skills/ - All 272 skills from skills.sh - agents/ - Agent definitions - *.sh, *.ps1 - Installation scripts - README.md, etc. - Documentation Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,82 @@
|
||||
# Design and Refine
|
||||
|
||||
Generate UI design variations, collect feedback, synthesize the best elements, and iterate to confident design decisions.
|
||||
|
||||
## Installation
|
||||
|
||||
### Local Testing
|
||||
|
||||
```bash
|
||||
claude --plugin-dir /path/to/design-variations-plugin
|
||||
```
|
||||
|
||||
### From Marketplace
|
||||
|
||||
```bash
|
||||
/plugin marketplace add 0xdesigner/design-plugin
|
||||
/plugin install design-and-refine@design-plugins
|
||||
```
|
||||
|
||||
## Commands
|
||||
|
||||
### `/design-and-refine:start [target]`
|
||||
|
||||
Start a design and refine session.
|
||||
|
||||
**Arguments:**
|
||||
- `target` (optional): Component or page to design/redesign
|
||||
|
||||
**Example:**
|
||||
```
|
||||
/design-and-refine:start CheckoutSummary
|
||||
/design-and-refine:start
|
||||
```
|
||||
|
||||
### `/design-and-refine:cleanup`
|
||||
|
||||
Remove all temporary design lab files.
|
||||
|
||||
## How It Works
|
||||
|
||||
1. **Preflight**: Detects framework, package manager, styling system
|
||||
2. **Style Inference**: Reads your existing design tokens and patterns
|
||||
3. **Interview**: Asks about requirements, pain points, and direction
|
||||
4. **Generate**: Creates 5 distinct variations using your project's visual language
|
||||
5. **Review**: Preview variants side-by-side at `/__design_lab`
|
||||
6. **Feedback**: Tell me what you like about each variant
|
||||
7. **Synthesize**: Creates a refined version combining the best elements
|
||||
8. **Iterate**: Repeat until you're confident
|
||||
9. **Finalize**: Cleans up temp files, produces `DESIGN_PLAN.md`
|
||||
|
||||
## Supported Frameworks
|
||||
|
||||
- Next.js (App Router & Pages Router)
|
||||
- Vite (React, Vue)
|
||||
- Remix
|
||||
- Astro
|
||||
- Create React App
|
||||
|
||||
## Supported Styling
|
||||
|
||||
- Tailwind CSS
|
||||
- CSS Modules
|
||||
- Material UI
|
||||
- Chakra UI
|
||||
- Ant Design
|
||||
- styled-components
|
||||
- Emotion
|
||||
|
||||
## Files Created
|
||||
|
||||
### Temporary (cleaned up on completion or abort)
|
||||
- `.claude-design/` - All temporary variants and previews
|
||||
- `app/__design_lab/` or `pages/__design_lab.tsx` - Lab route
|
||||
- `app/__design_preview/` or `pages/__design_preview.tsx` - Preview route
|
||||
|
||||
### Permanent (kept after finalization)
|
||||
- `DESIGN_PLAN.md` - Implementation plan for the chosen design
|
||||
- `DESIGN_MEMORY.md` - Reusable style decisions for future runs
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Reference in New Issue
Block a user