frappe-web-form-builder
Generate Frappe Web Forms for public-facing forms. Use when creating customer portals, registration forms, surveys, or public data collection forms.
498 repo starsObserved in 2 repos
Development
Development skills
Browse reusable Agent Skills, each with a clear purpose and practical guidance.
Frontend API Client with JWT
A conceptual skill for building an API client in Next.js that handles JWT tokens
498 repo starsObserved in 2 repos
Development
Frontend Components
Design reusable, composable UI components with single responsibility, clear props interfaces, minimal state management, and proper encapsulation. Use this skill when creating or modifying React components, Vue components, Svelte components, web components, or any modular UI building blocks. Use this when designing component APIs with props and defaults, managing component state, composing smaller components into larger UIs, documenting component usage, implementing component lifecycle methods, or ensuring components are reusable across different contexts. Use this when working on .jsx, .tsx, .vue, .svelte files in component directories like components/, src/components/, or app/components/.
498 repo starsObserved in 2 repos
Development
Frontend CSS
Write and maintain CSS using consistent methodology, design systems, framework utilities, and minimal custom styles for better performance and maintainability. Use this skill when writing or modifying CSS files, style modules, Tailwind classes, styled-components, CSS-in-JS, or any styling code for UI components. Use this when applying utility classes, maintaining design tokens for colors/spacing/typography, working with CSS frameworks like Tailwind or Bootstrap, avoiding framework style overrides, optimizing CSS for production with purging/tree-shaking, or implementing responsive styling. Use this when working on .css, .scss, .module.css files or when adding className/style attributes to components.
498 repo starsObserved in 2 repos
Development
frontend_mastery
Advanced React patterns, performance optimization, and state management rules.
498 repo starsObserved in 2 repos
Development
frontend-refactor-planner
Creates safe refactor plans for messy UI code including component splitting strategies, state simplification, performance optimizations, and accessibility improvements. Provides phased approach, risk assessment, and "done" criteria. Use when refactoring "legacy code", "messy components", "performance issues", or "large files".
498 repo starsObserved in 2 repos
Development
Frontend Responsive
Implement mobile-first responsive designs using fluid layouts, relative units, responsive images, and touch-friendly interfaces. Use this skill when creating layouts that adapt across screen sizes, implementing breakpoints, or optimizing for mobile and tablet devices. When working on responsive component layouts, Tailwind responsive utility classes (sm:, md:, lg:, xl:), CSS media queries and breakpoints, fluid typography with clamp() or viewport units, responsive images with srcset and sizes attributes, mobile navigation menus and hamburger patterns, touch target sizing for mobile devices, responsive grid and flexbox layouts, container queries for component-based responsiveness, or viewport meta tags and mobile optimization.
498 repo starsObserved in 2 repos
Development
frontend-specialists
Deliver resilient frontend solutions with performance, accessibility, and UX guardrails.
498 repo starsObserved in 2 repos
Development
fullstack-feature
Orchestrates creating a complete fullstack feature across backend and frontend. Use when adding new features that span both layers.
498 repo starsObserved in 2 repos
Development
fullstack-features
Building full-stack features in Toygres from UI to database. Use when adding new features, API endpoints, React components, or implementing end-to-end functionality.
498 repo starsObserved in 2 repos
Development