team-shinchan:frontend
npx machina-cli add skill seokan-jeong/team-shinchan/frontend --openclawFiles (1)
SKILL.md
1.4 KB
EXECUTE IMMEDIATELY
Step 1: Validate Input
If args is empty or only whitespace:
Ask user: "What frontend work would you like me to do?"
STOP and wait for user response
If args length > 2000 characters:
Truncate to 2000 characters
Warn user: "Request was truncated to 2000 characters"
Step 2: Execute Task
Do not read further. Execute this Task NOW:
Task(
subagent_type="team-shinchan:aichan",
model="sonnet",
prompt=`/team-shinchan:frontend has been invoked.
## Frontend Development Request
Handle frontend tasks including:
| Area | Capabilities |
|------|-------------|
| Components | React, Vue, Angular components |
| Styling | CSS, Tailwind, styled-components |
| Accessibility | WCAG compliance, a11y best practices |
| Responsive | Mobile-first, breakpoints, layouts |
| Performance | Bundle size, lazy loading, optimization |
## Implementation Requirements
- Follow existing project conventions
- Ensure responsive design
- Include accessibility attributes
- Write clean, reusable components
- Add appropriate comments for complex logic
User request: ${args || '(Please describe the frontend task)'}
`
)
STOP HERE. The above Task handles everything.
Source
git clone https://github.com/seokan-jeong/team-shinchan/blob/main/skills/frontend/SKILL.mdView on GitHub Overview
This skill handles frontend work requests using Aichan, focusing on UI, components, React, CSS, and styling. It validates input, then delegates implementation to the team-shinchan:aichan subagent, ensuring responsive, accessible, and performant interfaces.
How This Skill Works
Technically, it validates the user input (empty check and 2000-character cap). It then issues a Task to team-shinchan:aichan with model 'sonnet' and a prompt detailing frontend capabilities (components, styling, accessibility, responsiveness, performance). The subagent's output should follow project conventions, include comments, and deliver clean, reusable components.
When to Use It
- Implement a reusable UI component library (React, Vue, or Angular) with consistent styling.
- Build responsive layouts that adapt from mobile to desktop using CSS, Tailwind, or styled-components.
- Address accessibility by adding WCAG-compliant attributes and a11y best practices.
- Optimize performance by reducing bundle size and enabling lazy loading for frontend features.
- Upgrade or refactor UI code to align with project conventions and clean, maintainable components.
Quick Start
- Step 1: Describe the frontend task in args (e.g., 'Build a responsive card grid in React').
- Step 2: The system invokes a Task to team-shinchan:aichan (model: sonnet) with a detailed prompt.
- Step 3: Review the returned implementation and integrate it into your project, aligning with conventions.
Best Practices
- Follow existing project conventions
- Ensure responsive design
- Include accessibility attributes
- Write clean, reusable components
- Add appropriate comments for complex logic
Example Use Cases
- Create a reusable React Button component with variants (primary, secondary) and ARIA attributes.
- Develop a responsive NavBar with a mobile hamburger menu and accessible focus management.
- Refactor a CSS-heavy component to Tailwind utility classes for consistency.
- Build an accessible Modal with proper focus trap and keyboard navigation.
- Add a lazy-loaded dashboard widget to improve initial bundle size.
Frequently Asked Questions
Add this skill to your agents
