Frontend

Guidelines for writing reports, organizing files, and generating code artifacts

Determines which files and dependencies to generate based on application type (standalone vs micro-frontend). Controls conditional features.

Delegate asynchronous coding tasks to Jules (Google's AI coding agent) to maximize efficiency. Use for code reviews, refactoring, adding tests, bug fixes, and documentation. Proactively suggest Jules delegation when appropriate. Invoke when user asks to interact with Jules, create sessions, check task status, or when tasks are suitable for async delegation.

Design token system using Style Dictionary with Tailwind CSS v4 integration.Centralizes design tokens in JSON format, outputs CSS variables mapped to @theme block.Reference for implementing consistent theming across UI components.

Index of AI agent skills and how to use them when implementing features in this repo.

Design and build modern UI components and pages using shadcn/ui. Creates clean, accessible interfaces with Tailwind CSS following shadcn principles. Use when building UI components, pages, forms, dashboards, or any interface work.

LangChain LLM application framework with chains, agents, RAG, and memory for building AI-powered applications

Senior-level React and Tailwind CSS development expert with 10+ years experience. Automatically audits, generates, and optimizes React applications with focus on hooks, Context API, performance, security, and modern Tailwind styling. Use for React component generation using TypeScript, hook optimization, security audits, responsive design implementation, animation, Context API patterns, performance optimization, and project structure analysis. Ensures clean code, prevents backend data exposure, and follows senior-level best practices.

Vite + React template with TypeScript. Clone, setup, build, and deploy to Vercel or Netlify.

Use when implementing features from Jira tickets, PRDs, or user requirements. Orchestrates Research-Plan-Implement workflow with quality gates for hallucination, overengineering, and underengineering detection.

Create Claude Code skills with proper structure and documentation. Use when building custom skills, writing SKILL.md files, or when user asks "write a skill" or "create Claude skill".

Create new Claude Code skills with proper SKILL.md structure, frontmatter, and best practices. Use when building new skills for this repository.

shadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership. Use when building React applications needing customizable UI components with Next.js, Vite, or Remix integration.

Guide developers through consistent error handling including error hierarchies, API responses, and logging integration

MANDATORY for any web UI or styling change. Must be followed whenever touching web/src UI, layout, or CSS. Absolutely no shadows, glows, or flares; keep everything flat and token-driven.

Reviews UI components for WCAG compliance, ARIA attributes, keyboard navigation, and screen reader support. Use when building frontend components or user requests accessibility improvements.

Use this skill when styling pages, creating components, working with CSS variables, design patterns, or applying the Token Milagre visual identity. Contains spacing rules, color system, card effects, and component patterns.

Project Memory Management adapted from Context Engineering Kit. Enables the agent to maintain a persistent ".opencode/MEMORY.md" file to store architectural decisions, patterns, and "lessons learned".

Guide users through creating and configuring a GitHub App for workspace authentication. Use when setting up GitHub App authentication for happy-little-claude-coders, creating github-app-credentials secret, or configuring automatic token refresh.

Complete guide for CloudBase Auth v2 using Web SDK (@cloudbase/js-sdk@2.x) - all login flows, user management, captcha handling, and best practices in one file.