frontend
0
figma-to-component
Figma 디자인을 분석하여 프로젝트 규칙에 맞는 React 컴포넌트를 자동 생성합니다. Figma URL을 받아서 TDD 방식으로 컴포넌트, 스타일, 테스트, Storybook을 생성합니다.
gharam1234
development
sorting
stars
current ordering strategy
query
all entries
refine the visible subset
frontend
0
frontend-ddd
Assist with Frontend DDD architecture design, component organization, and testing. Triggers: frontend, 前端, react, component, 元件, vitest.
u9401066
development
frontend
0
heroui-component
Scaffolds new HeroUI v3 React components using compound component patterns. Enforces named exports, onPress handlers, and direct imports from @heroui/react. Use when creating new UI components.
eug-subscription
development
frontend
0
vuejs-dev
Vue 3 development: Composition API, reactivity, components, props/emits, Vue Router, Pinia. WHEN: Creating .vue components, using Composition API (ref, reactive, computed), props/emits, slots, composables, Vue Router navigation, Pinia state management. WHEN NOT: React development, plain HTML/JS (use html-dev, js-dev), ApexCharts (use vuejs-apex-charts), Shadcn components (use vuejs-shadcn).
LounisBou
development
frontend
0
gsap-awwwards-website
SPYLT product landing with GSAP scroll animations, React 19, and Tailwind CSS 4.
rebyteai-template
development
frontend
0
pro-components-guide
包含 Ant Design Pro Components (ProComponents) 的组件列表、适用场景及官方文档链接。用于辅助代码生成和参数查询。
jobsys
development
frontend
0
gsap-greensock
Use when implementing Disney's 12 animation principles with GSAP (GreenSock Animation Platform)
dylantarre
development
frontend
0
jp-ui-components
jp-uiのコンポーネント作成とStorybook Page作成のルールを守るためのスキル。Base UIラッパーの方針、render/useRenderの維持、レイアウト/余白/幅ルールを適用する。
yumehiko
development
frontend
0
frontend-responsive
Implement responsive designs using mobile-first development, standard breakpoints, fluid layouts with flexible containers, relative units (rem/em), touch-friendly design with appropriately-sized tap targets, optimized assets for mobile networks, readable typography across breakpoints, and content prioritization for smaller screens. Use this skill when building responsive layouts, implementing media queries, creating mobile-friendly interfaces, optimizing for different screen sizes, ensuring touch-friendly interactions, or testing across mobile, tablet, and desktop devices. This skill applies when working on any frontend layout code, CSS media queries, responsive component design, or mobile optimization.
FlorianRiquelme
development
frontend
0
universal-patterns
Use when creating any animation type - provides foundational timing, easing, and principle application that applies to all motion in interfaces.
dylantarre
development
frontend
0
footer-configuration
Configure footer navigation links for SEO completeness. Sets up all pages (Homepage, Services, About, Contact, Impressum, Datenschutz) in organized groups. Dynamically finds footer*.tsx component. Updates i18n with all footer keys.
deomiarn
development
frontend
0
tanstack-form
Use TanStack Form for complex forms with Zod validation. Use when building non-trivial forms or admin editors.
HuynhSang2005
development
frontend
0
component-patterns
React component composition patterns including compound components and render props. Use when designing reusable components.
IvanTorresEdge
development
frontend
0
css-layout-development
This skill provides prescriptive guidance for writing modern CSS layouts using intrinsic design principles, container queries, and fluid responsive techniques. When implementing CSS layouts, always consult this document first.
wernerglinka
development
frontend
0
frontend-developer
Use when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications.
dylantarre
development
frontend
0
ux-simplicity
Ensure UI/UX stays simple and mobile-first for non-technical users. Use when creating or modifying any UI components, layouts, forms, navigation, or user-facing text. Prevents complex designs and enforces permission-based changes.
Joseph-VJ
development
frontend
0
mui-v7-mastery
Guia completo de MUI V7 para React + TypeScript. Ensina migração V6→V7, design responsivo avançado, theming profissional, padrões de componentes e detecção automática de sintaxe antiga. Use quando criar dashboards, interfaces modernas, ou trabalhar com Material-UI/MUI.
Just-mpm
development
frontend
0
automation-design-system
Criar ou evoluir um Design System reutilizavel no frontend do app de automacao com base no artefato UI.md (tokens + HTML/CSS do Stitch). Use quando for necessario implementar tokens globais, componentizar UI (Button, Card, Modal, Table, Sidebar/Topbar), padronizar estilos ou criar paginas de exemplo sem marketing UI ou graficos.
ricardoadorno
development
frontend
0
bootstrap-guidelines
Garante uso correto do Bootstrap 5 sem CSS customizado. Use quando criar ou modificar HTML, estilizar componentes, ajustar layout, ou o usuário mencionar Bootstrap, grid, responsividade, ou classes CSS.
afonsolelis
development
frontend
0
syncfusion-verified
Use when implementing, editing, or discussing any SyncFusion EJ2 React component (Grid, Gantt, Schedule, Kanban, Dialog, etc). Contains only officially verified best practices from SyncFusion documentation. For styling/layout/icons, also use syncfusion-styling skill. Theme-agnostic rules that work with Fluent2, Material, Bootstrap, etc.
danielnymberg
development
frontend
0
effect-lookup
Quick lookup for Effect TypeScript library APIs, patterns, and source code. Use when you need to find Effect functions, understand Effect patterns, or look up implementation details.
guillempuche
development