Agent skill
frontend-master
Frontend UI/UX work with Gemini CLI in --yolo mode. Use when (1) modifying visual/styling elements in frontend files (.tsx, .jsx, .vue, .svelte, .css), (2) implementing UI components, (3) adjusting layout, colors, spacing, typography, or animations, (4) creating responsive designs, or (5) any frontend task involving how things LOOK rather than how they WORK.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/frontend-master
SKILL.md
Gemini Frontend Skill
Execute frontend UI/UX tasks using Gemini CLI in --yolo mode for automatic approval.
When to Use
- Visual changes: colors, backgrounds, borders, shadows
- Layout: flexbox, grid, margins, padding, positioning
- Typography: font sizes, weights, line heights
- Animation: transitions, keyframes, hover states
- Responsive design: breakpoints, media queries
- Component styling: Tailwind, CSS-in-JS, styled-components
When NOT to Use
- Pure logic changes (API calls, state management, event handlers)
- Type definitions, utility functions, business logic
- Use
logic-masterskill for logic optimization or image-based tasks
Execution Pattern
Basic Command Structure
# With file context
cat <frontend-file> | gemini --yolo --prompt "<instruction>"
# With directory context
gemini --yolo --prompt "<instruction>" --include-directories <dirs>
# With all project files
gemini --yolo --prompt "<instruction>" --all-files
Required Flags
| Flag | Purpose |
|---|---|
--yolo |
MANDATORY - Auto-approve all changes |
--prompt or -p |
Specify the task |
--include-directories |
Add specific folders to context |
--all-files or -a |
Include full project context |
--output-format json |
Get structured output for parsing |
Workflow
- Identify frontend file(s) to modify
- Construct Gemini command with
--yoloflag - Execute via bash tool
- Verify results with
lsp_diagnostics - Apply changes if output is satisfactory
Example Commands
Modify Component Styling
# Update button styles
cat src/components/Button.tsx | gemini --yolo -p "Change button color to blue-500, add hover:scale-105 transition"
# Responsive navbar
gemini --yolo -p "Make the navbar responsive with hamburger menu on mobile" --include-directories src/components
Layout Changes
# Convert to grid layout
cat src/pages/Dashboard.tsx | gemini --yolo -p "Convert this layout to CSS Grid with 3 columns"
# Add spacing
gemini --yolo -p "Add consistent spacing between cards using gap-4" --include-directories src/components/cards
Animation & Effects
# Add transitions
cat src/components/Modal.tsx | gemini --yolo -p "Add fade-in animation when modal opens"
# Hover effects
gemini --yolo -p "Add subtle shadow and scale effect on card hover" --include-directories src/components
Full Project Changes
# Theme update
gemini --yolo -p "Update all components to use dark mode color palette" --all-files
# Design system alignment
gemini --yolo -p "Align all buttons to use design system tokens" --all-files
Output Handling
Get JSON Output for Scripting
gemini --yolo -p "List all CSS classes used in this component" --output-format json | jq '.response'
Save Changes to File
cat src/styles/main.css | gemini --yolo -p "Add responsive utilities" > src/styles/main.css.new
Integration with Subagents
When delegating to frontend-ui-ux-engineer:
1. TASK: Execute Gemini CLI to update component styling
2. EXPECTED OUTCOME: Component with updated visual styles
3. REQUIRED SKILLS: frontend-master
4. REQUIRED TOOLS: Bash (for gemini CLI), Read, lsp_diagnostics
5. MUST DO:
- Use --yolo flag for auto-approval
- Verify changes with lsp_diagnostics after execution
- Match existing Tailwind/CSS patterns in codebase
6. MUST NOT DO:
- Modify logic or event handlers
- Remove existing functionality
- Use --approval-mode (use --yolo instead)
7. CONTEXT: [file paths, design requirements, existing patterns]
Troubleshooting
| Issue | Solution |
|---|---|
| Command hangs | Ensure --yolo flag is present |
| No changes made | Check file is in context (use --include-directories) |
| Unexpected changes | Add more specific constraints in prompt |
| Build errors | Run lsp_diagnostics and fix type issues |
Security Note
--yolo mode auto-approves ALL actions. Use only when:
- Working in version-controlled directories
- Changes can be easily reverted
- No sensitive operations involved
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?