{"id":"1d4824d9-1c52-4b58-8ee1-67f81650b4d5","shortId":"55fugF","kind":"skill","title":"frontend-developer","tagline":"Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture.","description":"You are a frontend development expert specializing in modern React applications, Next.js, and cutting-edge frontend architecture.\n\n## Use this skill when\n\n- Building React or Next.js UI components and pages\n- Fixing frontend performance, accessibility, or state issues\n- Designing client-side data fetching and interaction flows\n\n## Do not use this skill when\n\n- You only need backend API architecture\n- You are building native apps outside the web stack\n- You need pure visual design without implementation guidance\n\n## Instructions\n\n1. Clarify requirements, target devices, and performance goals.\n2. Choose component structure and state or data approach.\n3. Implement UI with accessibility and responsive behavior.\n4. Validate performance and UX with profiling and audits.\n\n## Purpose\nExpert frontend developer specializing in React 19+, Next.js 15+, and modern web application development. Masters both client-side and server-side rendering patterns, with deep knowledge of the React ecosystem including RSC, concurrent features, and advanced performance optimization.\n\n## Capabilities\n\n### Core React Expertise\n- React 19 features including Actions, Server Components, and async transitions\n- Concurrent rendering and Suspense patterns for optimal UX\n- Advanced hooks (useActionState, useOptimistic, useTransition, useDeferredValue)\n- Component architecture with performance optimization (React.memo, useMemo, useCallback)\n- Custom hooks and hook composition patterns\n- Error boundaries and error handling strategies\n- React DevTools profiling and optimization techniques\n\n### Next.js & Full-Stack Integration\n- Next.js 15 App Router with Server Components and Client Components\n- React Server Components (RSC) and streaming patterns\n- Server Actions for seamless client-server data mutations\n- Advanced routing with parallel routes, intercepting routes, and route handlers\n- Incremental Static Regeneration (ISR) and dynamic rendering\n- Edge runtime and middleware configuration\n- Image optimization and Core Web Vitals optimization\n- API routes and serverless function patterns\n\n### Modern Frontend Architecture\n- Component-driven development with atomic design principles\n- Micro-frontends architecture and module federation\n- Design system integration and component libraries\n- Build optimization with Webpack 5, Turbopack, and Vite\n- Bundle analysis and code splitting strategies\n- Progressive Web App (PWA) implementation\n- Service workers and offline-first patterns\n\n### State Management & Data Fetching\n- Modern state management with Zustand, Jotai, and Valtio\n- React Query/TanStack Query for server state management\n- SWR for data fetching and caching\n- Context API optimization and provider patterns\n- Redux Toolkit for complex state scenarios\n- Real-time data with WebSockets and Server-Sent Events\n- Optimistic updates and conflict resolution\n\n### Styling & Design Systems\n- Tailwind CSS with advanced configuration and plugins\n- CSS-in-JS with emotion, styled-components, and vanilla-extract\n- CSS Modules and PostCSS optimization\n- Design tokens and theming systems\n- Responsive design with container queries\n- CSS Grid and Flexbox mastery\n- Animation libraries (Framer Motion, React Spring)\n- Dark mode and theme switching patterns\n\n### Performance & Optimization\n- Core Web Vitals optimization (LCP, FID, CLS)\n- Advanced code splitting and dynamic imports\n- Image optimization and lazy loading strategies\n- Font optimization and variable fonts\n- Memory leak prevention and performance monitoring\n- Bundle analysis and tree shaking\n- Critical resource prioritization\n- Service worker caching strategies\n\n### Testing & Quality Assurance\n- React Testing Library for component testing\n- Jest configuration and advanced testing patterns\n- End-to-end testing with Playwright and Cypress\n- Visual regression testing with Storybook\n- Performance testing and lighthouse CI\n- Accessibility testing with axe-core\n- Type safety with TypeScript 5.x features\n\n### Accessibility & Inclusive Design\n- WCAG 2.1/2.2 AA compliance implementation\n- ARIA patterns and semantic HTML\n- Keyboard navigation and focus management\n- Screen reader optimization\n- Color contrast and visual accessibility\n- Accessible form patterns and validation\n- Inclusive design principles\n\n### Developer Experience & Tooling\n- Modern development workflows with hot reload\n- ESLint and Prettier configuration\n- Husky and lint-staged for git hooks\n- Storybook for component documentation\n- Chromatic for visual testing\n- GitHub Actions and CI/CD pipelines\n- Monorepo management with Nx, Turbo, or Lerna\n\n### Third-Party Integrations\n- Authentication with NextAuth.js, Auth0, and Clerk\n- Payment processing with Stripe and PayPal\n- Analytics integration (Google Analytics 4, Mixpanel)\n- CMS integration (Contentful, Sanity, Strapi)\n- Database integration with Prisma and Drizzle\n- Email services and notification systems\n- CDN and asset optimization\n\n## Behavioral Traits\n- Prioritizes user experience and performance equally\n- Writes maintainable, scalable component architectures\n- Implements comprehensive error handling and loading states\n- Uses TypeScript for type safety and better DX\n- Follows React and Next.js best practices religiously\n- Considers accessibility from the design phase\n- Implements proper SEO and meta tag management\n- Uses modern CSS features and responsive design patterns\n- Optimizes for Core Web Vitals and lighthouse scores\n- Documents components with clear props and usage examples\n\n## Knowledge Base\n- React 19+ documentation and experimental features\n- Next.js 15+ App Router patterns and best practices\n- TypeScript 5.x advanced features and patterns\n- Modern CSS specifications and browser APIs\n- Web Performance optimization techniques\n- Accessibility standards and testing methodologies\n- Modern build tools and bundler configurations\n- Progressive Web App standards and service workers\n- SEO best practices for modern SPAs and SSR\n- Browser APIs and polyfill strategies\n\n## Response Approach\n1. **Analyze requirements** for modern React/Next.js patterns\n2. **Suggest performance-optimized solutions** using React 19 features\n3. **Provide production-ready code** with proper TypeScript types\n4. **Include accessibility considerations** and ARIA patterns\n5. **Consider SEO and meta tag implications** for SSR/SSG\n6. **Implement proper error boundaries** and loading states\n7. **Optimize for Core Web Vitals** and user experience\n8. **Include Storybook stories** and component documentation\n\n## Example Interactions\n- \"Build a server component that streams data with Suspense boundaries\"\n- \"Create a form with Server Actions and optimistic updates\"\n- \"Implement a design system component with Tailwind and TypeScript\"\n- \"Optimize this React component for better rendering performance\"\n- \"Set up Next.js middleware for authentication and routing\"\n- \"Create an accessible data table with sorting and filtering\"\n- \"Implement real-time updates with WebSockets and React Query\"\n- \"Build a PWA with offline capabilities and push notifications\"\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["frontend","developer","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-frontend-developer","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/frontend-developer","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34793 github stars · SKILL.md body (7,367 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-24T00:50:59.735Z","embedding":null,"createdAt":"2026-04-18T21:37:40.166Z","updatedAt":"2026-04-24T00:50:59.735Z","lastSeenAt":"2026-04-24T00:50:59.735Z","tsv":"'/2.2':551 '1':102,802 '15':21,145,237,745 '19':19,143,182,739,817 '2':110,809 '2.1':550 '3':119,819 '4':127,642,829 '5':325,543,753,836 '6':845 '7':853 '8':862 'aa':552 'access':59,123,533,546,572,573,700,769,831,917 'action':185,254,611,886 'advanc':174,199,262,406,464,511,755 'analysi':330,488 'analyt':638,641 'analyz':803 'anim':443 'api':82,291,373,764,796 'app':88,238,337,746,782 'applic':36,149 'approach':118,801 'architectur':25,43,83,206,299,311,676 'aria':555,834 'ask':976 'asset':662 'assur':501 'async':189 'atom':305 'audit':135 'auth0':629 'authent':626,912 'axe':537 'axe-cor':536 'backend':81 'base':737 'behavior':126,664 'best':696,750,788 'better':690,904 'boundari':220,849,880,984 'browser':763,795 'build':4,48,86,321,775,871,934 'bundl':329,487 'bundler':778 'cach':371,497 'capabl':177,939 'cdn':660 'choos':111 'chromat':606 'ci':532 'ci/cd':613 'clarif':978 'clarifi':103 'clear':731,951 'clerk':631 'client':13,65,154,244,258 'client-serv':257 'client-sid':12,64,153 'cls':463 'cms':644 'code':332,465,824 'color':568 'complex':381 'complianc':553 'compon':6,53,112,187,205,242,245,248,301,319,418,506,604,675,729,867,874,894,902 'component-driven':300 'composit':217 'comprehens':678 'concurr':171,191 'configur':283,407,509,593,779 'conflict':398 'consid':699,837 'consider':832 'contain':436 'content':646 'context':372 'contrast':569 'core':178,287,457,538,722,856 'creat':881,915 'criteria':987 'critic':492 'css':404,411,423,438,714,760 'css-in-j':410 'custom':213 'cut':40 'cutting-edg':39 'cypress':522 'dark':449 'data':67,117,260,349,368,387,877,918 'databas':649 'deep':163 'describ':955 'design':63,97,306,315,401,428,434,548,579,703,718,892 'develop':3,30,139,150,303,581,585 'devic':106 'devtool':226 'document':605,728,740,868 'driven':302 'drizzl':654 'dx':691 'dynam':277,468 'ecosystem':168 'edg':41,279 'email':655 'emot':415 'end':515,517 'end-to-end':514 'environ':967 'environment-specif':966 'equal':671 'error':219,222,679,848 'eslint':590 'event':394 'exampl':735,869 'experi':582,668,861 'experiment':742 'expert':31,137,972 'expertis':180 'extract':422 'featur':172,183,545,715,743,756,818 'feder':314 'fetch':68,350,369 'fid':462 'filter':923 'first':345 'fix':56 'flexbox':441 'flow':71 'focus':563 'follow':692 'font':476,480 'form':574,883 'framer':445 'frontend':2,24,29,42,57,138,298,310 'frontend-develop':1 'full':233 'full-stack':232 'function':295 'git':600 'github':610 'goal':109 'googl':640 'grid':439 'guidanc':100 'handl':11,223,680 'handler':271 'hook':200,214,216,601 'hot':588 'html':559 'huski':594 'imag':284,470 'implement':7,99,120,339,554,677,705,846,890,924 'implic':842 'import':469 'includ':169,184,830,863 'inclus':547,578 'increment':272 'input':981 'instruct':101 'integr':235,317,625,639,645,650 'interact':70,870 'intercept':267 'isr':275 'issu':62 'jest':508 'jotai':356 'js':413 'keyboard':560 'knowledg':164,736 'layout':9 'lazi':473 'lcp':461 'leak':482 'lerna':621 'librari':320,444,504 'lighthous':531,726 'limit':943 'lint':597 'lint-stag':596 'load':474,682,851 'maintain':673 'manag':16,348,353,365,564,616,711 'master':17,151 'masteri':442 'match':952 'memori':481 'meta':709,840 'methodolog':773 'micro':309 'micro-frontend':308 'middlewar':282,910 'miss':989 'mixpanel':643 'mode':450 'modern':23,34,147,297,351,584,713,759,774,791,806 'modul':313,424 'monitor':486 'monorepo':615 'motion':446 'mutat':261 'nativ':87 'navig':561 'need':80,94 'next.js':20,37,51,144,231,236,695,744,909 'nextauth.js':628 'notif':658,942 'nx':618 'offlin':344,938 'offline-first':343 'optim':176,197,209,229,285,290,322,374,427,456,460,471,477,567,663,720,767,813,854,899 'optimist':395,888 'output':961 'outsid':89 'page':55 'parallel':265 'parti':624 'pattern':161,195,218,252,296,346,377,454,513,556,575,719,748,758,808,835 'payment':632 'paypal':637 'perform':58,108,129,175,208,455,485,528,670,766,812,906 'performance-optim':811 'permiss':982 'phase':704 'pipelin':614 'playwright':520 'plugin':409 'polyfil':798 'postcss':426 'practic':697,751,789 'prettier':592 'prevent':483 'principl':307,580 'priorit':494,666 'prisma':652 'process':633 'product':822 'production-readi':821 'profil':133,227 'progress':335,780 'prop':732 'proper':706,826,847 'provid':376,820 'pure':95 'purpos':136 'push':941 'pwa':338,936 'qualiti':500 'queri':361,437,933 'query/tanstack':360 'react':5,18,35,49,142,167,179,181,225,246,359,447,502,693,738,816,901,932 'react.memo':210 'react/next.js':807 'reader':566 'readi':823 'real':385,926 'real-tim':384,925 'redux':378 'regener':274 'regress':524 'religi':698 'reload':589 'render':160,192,278,905 'requir':104,804,980 'resolut':399 'resourc':493 'respons':8,125,433,717,800 'review':973 'rout':263,266,268,270,292,914 'router':239,747 'rsc':170,249 'runtim':280 'safeti':540,688,983 'saniti':647 'scalabl':674 'scenario':383 'scope':954 'score':727 'screen':565 'seamless':256 'semant':558 'sent':393 'seo':707,787,838 'server':158,186,241,247,253,259,363,392,873,885 'server-s':391 'server-sid':157 'serverless':294 'servic':340,495,656,785 'set':907 'shake':491 'side':14,66,155,159 'skill':46,76,946 'skill-frontend-developer' 'solut':814 'sort':921 'source-sickn33' 'spas':792 'special':32,140 'specif':761,968 'split':333,466 'spring':448 'ssr':794 'ssr/ssg':844 'stack':92,234 'stage':598 'standard':770,783 'state':15,61,115,347,352,364,382,683,852 'static':273 'stop':974 'stori':865 'storybook':527,602,864 'strapi':648 'strategi':224,334,475,498,799 'stream':251,876 'stripe':635 'structur':113 'style':400,417 'styled-compon':416 'substitut':964 'success':986 'suggest':810 'suspens':194,879 'switch':453 'swr':366 'system':316,402,432,659,893 'tabl':919 'tag':710,841 'tailwind':403,896 'target':105 'task':950 'techniqu':230,768 'test':499,503,507,512,518,525,529,534,609,772,970 'theme':431,452 'third':623 'third-parti':622 'time':386,927 'token':429 'tool':583,776 'toolkit':379 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'trait':665 'transit':190 'treat':959 'tree':490 'turbo':619 'turbopack':326 'type':539,687,828 'typescript':542,685,752,827,898 'ui':52,121 'updat':396,889,928 'usag':734 'use':44,74,684,712,815,944 'useactionst':201 'usecallback':212 'usedeferredvalu':204 'usememo':211 'useoptimist':202 'user':667,860 'usetransit':203 'ux':131,198 'valid':128,577,969 'valtio':358 'vanilla':421 'vanilla-extract':420 'variabl':479 'visual':96,523,571,608 'vital':289,459,724,858 'vite':328 'wcag':549 'web':91,148,288,336,458,723,765,781,857 'webpack':324 'websocket':389,930 'without':98 'worker':341,496,786 'workflow':586 'write':672 'x':544,754 'zustand':355","prices":[{"id":"84b7ab7d-ab59-42bf-bb6b-c58566b8ee68","listingId":"1d4824d9-1c52-4b58-8ee1-67f81650b4d5","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:37:40.166Z"}],"sources":[{"listingId":"1d4824d9-1c52-4b58-8ee1-67f81650b4d5","source":"github","sourceId":"sickn33/antigravity-awesome-skills/frontend-developer","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-developer","isPrimary":false,"firstSeenAt":"2026-04-18T21:37:40.166Z","lastSeenAt":"2026-04-24T00:50:59.735Z"},{"listingId":"1d4824d9-1c52-4b58-8ee1-67f81650b4d5","source":"skills_sh","sourceId":"sickn33/antigravity-awesome-skills/frontend-developer","sourceUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/frontend-developer","isPrimary":true,"firstSeenAt":"2026-04-23T00:40:55.804Z","lastSeenAt":"2026-04-23T00:40:55.804Z"}],"details":{"listingId":"1d4824d9-1c52-4b58-8ee1-67f81650b4d5","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"frontend-developer","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34793,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-24T00:28:59Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"230f9e8653e1fab97961fe900bb6a466720e777d","skill_md_path":"skills/frontend-developer/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-developer"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"frontend-developer","description":"Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/frontend-developer"},"updatedAt":"2026-04-24T00:50:59.735Z"}}