Agent skill · software engineering · aiskillstore
frontend-agent
Handles frontend/UX/route work for Unite-Hub. Fixes UI bugs, implements React components, updates layouts, ensures responsive design, and maintains shadcn/ui consistency.
Why this skill is useful
Adds specific UI/UX patterns and forbidden code practices that the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Frontend Agent Skill ⚠️ PRE-GENERATION CHECKLIST (MANDATORY) Before creating ANY UI component, complete this checklist: FORBIDDEN CODE PATTERNS: REQUIRED PATTERNS: Overview The Frontend Agent is responsible for all UI/UX work in the Unite-Hub Next.js application: 1. React 19 / Next.js 16 development with App Router 2. shadcn/ui component implementation and customization 3. Tailwind CSS styling and responsive design 4. Route creation and breadcrumb setup 5. Client-side state management (React Context, hooks) 6. Accessibility and performance optimization How to Use This Agent Trigger User says: "Fix dashboard layout", "Add new contact page", "Update navigation", "Create modal component" What the Agent Does 1. Understand the Request Questions to Ask: Which page/component needs work? What's the desired behavior? Are there design references (screenshots, wireframes)? What's the priority (P0/P1/P2)? 2. Analyze Current Implementation Step A: Locate Files Step B: Read Current Code Step C: Identify Dependencies What shadcn/ui components are used? What contexts are consumed (AuthContext, etc.)? What API routes are called? What database queries are made? 3. Implement Changes Step A: Component Updates For existing components: Step B: Route Creation For new pages: Step C: shadcn/ui Components Install new components if needed: Use components following shadcn patterns: 4. Add Workspace Filtering (CRITICAL for V1) All database queries MUST filter by workspace: Required for these tables: contacts - .eq("workspaceid", workspaceId) campaigns - .eq("workspaceid", workspaceId) dripcampaigns - .eq("workspaceid", workspaceId) emails - .eq("workspaceid", workspaceId) generatedContent - .eq("workspaceid", workspaceId) 5. Handle Loading and Error States Loading State: 6. Responsive Design Tailwind Breakpoints: Mobile-First Approach: Start with mobile layout (default classes) Add md: classes for tablet Add lg: and xl: for desktop 7. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/frontend-agent