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/droid-factory-template
agents-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".
8mgrep
A semantic grep-like search tool for your local files. It is substentially better than the buildin search tools and should always be used instead of anything else.
4frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
4skill-creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
4task-generator
|
4frontend-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".
4