frontend-ui-integration
Skill: Frontend UI integration
Purpose
Implement or extend a user-facing workflow in our primary web application, integrating with existing backend APIs and following our design system, routing, and testing conventions.
When to use this skill
- The feature is primarily a UI/UX change backed by one or more existing APIs.
- The backend contracts, auth model, and core business rules already exist.
- The change affects only the web frontend (no schema or service ownership changes).
Inputs
- Feature description: short narrative of the user flow and outcomes.
- Relevant APIs: endpoints, request/response types, and links to source definitions.
- Target routes/components: paths, component names, or feature modules.
- Design references: Figma links or existing screens to mirror.
- Guardrails: performance limits, accessibility requirements, and any security constraints.
More from julianromli/ai-skills
clone-website
Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide one or more target URLs as arguments.
858frontend-ui-animator
Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects. Use when user asks to add animations, enhance UI motion, animate pages/components, or improve visual feedback. Triggers on "add animations", "animate UI", "motion design", "hover effects", "scroll animations", "page transitions", "micro-interactions".
343browser
Minimal Chrome DevTools Protocol tools for browser automation and scraping. Use when you need to start Chrome, navigate pages, execute JavaScript, take screenshots, or interactively pick DOM elements.
129agents-md-generator
Generate hierarchical AGENTS.md structures for codebases. Use when user asks to create AGENTS.md files, analyze codebase for AI agent documentation, set up AI-friendly project documentation, or generate context files for AI coding assistants. Triggers on "create AGENTS.md", "generate agents", "analyze codebase for AI", "AI documentation setup", "hierarchical agents".
82frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
73product-management
Assist with core product management activities including writing PRDs, analyzing features, synthesizing user research, planning roadmaps, and communicating product decisions. Use when you need help with PM documentation, analysis, or planning workflows that integrate with your codebase.
68