メニュー
Creates color palettes and color systems for applications. Defines primary, secondary, neutral colors, and semantic colors (success, error, warning, info). Ensures accessibility compliance and provides usage guidelines.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Checks code for accessibility issues including missing alt text, poor color contrast, missing ARIA labels, keyboard navigation issues, screen reader compatibility, and focus management. Returns structured accessibility issue reports with WCAG compliance information.
Ensures designs meet accessibility requirements including WCAG compliance, color contrast, keyboard navigation, screen reader support, and focus management. Reviews designs for accessibility issues and provides recommendations.
Assesses agent capabilities by analyzing agent files and determining what tasks they can handle. Use when you need to evaluate if an existing agent can handle a task or if a new agent is needed. Reviews agent descriptions, skills, and workflows to determine capability match.
Creates new agent files with complete specifications, following the same format as existing agents. Use when a new agent is needed for tasks that existing agents cannot handle. Generates agent markdown files with name, description, core principles, workflow, and integration details.
Implements API endpoints, routes, controllers, and request/response handling. Use when implementing REST APIs, GraphQL APIs, or other API endpoints. Handles routing, validation, error handling, and response formatting.
Reviews code architecture for design issues including poor separation of concerns, tight coupling, missing abstractions, design pattern violations, scalability concerns, and maintainability issues. Returns structured architecture review reports with improvement suggestions.
| name | color-system-designer |
| description | Creates color palettes and color systems for applications. Defines primary, secondary, neutral colors, and semantic colors (success, error, warning, info). Ensures accessibility compliance and provides usage guidelines. |
Input: "Create color system for application" Output:
### Color System
**Primary Colors:**
- Primary: #007bff (blue)
- Primary Dark: #0056b3
- Primary Light: #66b3ff
- Primary Lighter: #cce6ff
**Secondary Colors:**
- Secondary: #6c757d (gray)
- Secondary Dark: #545b62
- Secondary Light: #adb5bd
**Neutral Colors:**
- White: #ffffff
- Gray 100: #f8f9fa
- Gray 200: #e9ecef
- Gray 300: #dee2e6
- Gray 400: #ced4da
- Gray 500: #adb5bd
- Gray 600: #6c757d
- Gray 700: #495057
- Gray 800: #343a40
- Gray 900: #212529
- Black: #000000
**Semantic Colors:**
- Success: #28a745 (green)
- Error: #dc3545 (red)
- Warning: #ffc107 (yellow)
- Info: #17a2b8 (cyan)
**Accessibility:**
- All text colors meet WCAG AA (4.5:1 contrast)
- Primary on white: 4.5:1 ✓
- White on primary: 4.5:1 ✓
- Error text on white: 4.5:1 ✓
**Usage Guidelines:**
- Primary: Main actions, links, important elements
- Secondary: Secondary actions, less important elements
- Success: Success messages, positive feedback
- Error: Error messages, destructive actions
- Warning: Warning messages, caution
- Info: Informational messages
Provide colors in design token format:
**Design Tokens:**
- `color.primary`: #007bff
- `color.primary.dark`: #0056b3
- `color.text.primary`: #212529
- `color.text.secondary`: #6c757d
- `color.background`: #ffffff
- `color.border`: #dee2e6