{"id":"b90ed919-1051-4d5a-bd19-166cd730645d","shortId":"EnN6xC","kind":"skill","title":"senior-frontend","tagline":"Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.","description":"# Senior Frontend\n\nFrontend development patterns, performance optimization, and automation tools for React/Next.js applications.\n\n## When to Use\n- Use when scaffolding a new React or Next.js project with TypeScript and Tailwind CSS.\n- Use when generating new components or custom hooks.\n- Use when analyzing and optimizing bundle sizes for frontend applications.\n- Use to implement or review advanced React patterns like Compound Components or Render Props.\n- Use to ensure accessibility compliance and implement robust testing strategies.\n\n## Table of Contents\n\n- [Project Scaffolding](#project-scaffolding)\n- [Component Generation](#component-generation)\n- [Bundle Analysis](#bundle-analysis)\n- [React Patterns](#react-patterns)\n- [Next.js Optimization](#nextjs-optimization)\n- [Accessibility and Testing](#accessibility-and-testing)\n\n---\n\n## Project Scaffolding\n\nGenerate a new Next.js or React project with TypeScript, Tailwind CSS, and best practice configurations.\n\n### Workflow: Create New Frontend Project\n\n1. Run the scaffolder with your project name and template:\n\n   ```bash\n   python scripts/frontend_scaffolder.py my-app --template nextjs\n   ```\n\n2. Add optional features (auth, api, forms, testing, storybook):\n\n   ```bash\n   python scripts/frontend_scaffolder.py dashboard --template nextjs --features auth,api\n   ```\n\n3. Navigate to the project and install dependencies:\n\n   ```bash\n   cd my-app && npm install\n   ```\n\n4. Start the development server:\n   ```bash\n   npm run dev\n   ```\n\n### Scaffolder Options\n\n| Option               | Description                                       |\n| -------------------- | ------------------------------------------------- |\n| `--template nextjs`  | Next.js 14+ with App Router and Server Components |\n| `--template react`   | React + Vite with TypeScript                      |\n| `--features auth`    | Add NextAuth.js authentication                    |\n| `--features api`     | Add React Query + API client                      |\n| `--features forms`   | Add React Hook Form + Zod validation              |\n| `--features testing` | Add Vitest + Testing Library                      |\n| `--dry-run`          | Preview files without creating them               |\n\n### Generated Structure (Next.js)\n\n```\nmy-app/\n├── app/\n│   ├── layout.tsx        # Root layout with fonts\n│   ├── page.tsx          # Home page\n│   ├── globals.css       # Tailwind + CSS variables\n│   └── api/health/route.ts\n├── components/\n│   ├── ui/               # Button, Input, Card\n│   └── layout/           # Header, Footer, Sidebar\n├── hooks/                # useDebounce, useLocalStorage\n├── lib/                  # utils (cn), constants\n├── types/                # TypeScript interfaces\n├── tailwind.config.ts\n├── next.config.js\n└── package.json\n```\n\n---\n\n## Component Generation\n\nGenerate React components with TypeScript, tests, and Storybook stories.\n\n### Workflow: Create a New Component\n\n1. Generate a client component:\n\n   ```bash\n   python scripts/component_generator.py Button --dir src/components/ui\n   ```\n\n2. Generate a server component:\n\n   ```bash\n   python scripts/component_generator.py ProductCard --type server\n   ```\n\n3. Generate with test and story files:\n\n   ```bash\n   python scripts/component_generator.py UserProfile --with-test --with-story\n   ```\n\n4. Generate a custom hook:\n   ```bash\n   python scripts/component_generator.py FormValidation --type hook\n   ```\n\n### Generator Options\n\n| Option          | Description                                  |\n| --------------- | -------------------------------------------- |\n| `--type client` | Client component with 'use client' (default) |\n| `--type server` | Async server component                       |\n| `--type hook`   | Custom React hook                            |\n| `--with-test`   | Include test file                            |\n| `--with-story`  | Include Storybook story                      |\n| `--flat`        | Create in output dir without subdirectory    |\n| `--dry-run`     | Preview without creating files               |\n\n### Generated Component Example\n\n```tsx\n\"use client\";\n\nimport { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface ButtonProps {\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function Button({ className, children }: ButtonProps) {\n  return <div className={cn(\"\", className)}>{children}</div>;\n}\n```\n\n---\n\n## Bundle Analysis\n\nAnalyze package.json and project structure for bundle optimization opportunities.\n\n### Workflow: Optimize Bundle Size\n\n1. Run the analyzer on your project:\n\n   ```bash\n   python scripts/bundle_analyzer.py /path/to/project\n   ```\n\n2. Review the health score and issues:\n\n   ```\n   Bundle Health Score: 75/100 (C)\n\n   HEAVY DEPENDENCIES:\n     moment (290KB)\n       Alternative: date-fns (12KB) or dayjs (2KB)\n\n     lodash (71KB)\n       Alternative: lodash-es with tree-shaking\n   ```\n\n3. Apply the recommended fixes by replacing heavy dependencies.\n\n4. Re-run with verbose mode to check import patterns:\n   ```bash\n   python scripts/bundle_analyzer.py . --verbose\n   ```\n\n### Bundle Score Interpretation\n\n| Score  | Grade | Action                         |\n| ------ | ----- | ------------------------------ |\n| 90-100 | A     | Bundle is well-optimized       |\n| 80-89  | B     | Minor optimizations available  |\n| 70-79  | C     | Replace heavy dependencies     |\n| 60-69  | D     | Multiple issues need attention |\n| 0-59   | F     | Critical bundle size problems  |\n\n### Heavy Dependencies Detected\n\nThe analyzer identifies these common heavy packages:\n\n| Package       | Size  | Alternative                    |\n| ------------- | ----- | ------------------------------ |\n| moment        | 290KB | date-fns (12KB) or dayjs (2KB) |\n| lodash        | 71KB  | lodash-es with tree-shaking    |\n| axios         | 14KB  | Native fetch or ky (3KB)       |\n| jquery        | 87KB  | Native DOM APIs                |\n| @mui/material | Large | shadcn/ui or Radix UI          |\n\n---\n\n## React Patterns\n\nReference: `references/react_patterns.md`\n\n### Compound Components\n\nShare state between related components:\n\n```tsx\nconst Tabs = ({ children }) => {\n  const [active, setActive] = useState(0);\n  return (\n    <TabsContext.Provider value={{ active, setActive }}>\n      {children}\n    </TabsContext.Provider>\n  );\n};\n\nTabs.List = TabList;\nTabs.Panel = TabPanel;\n\n// Usage\n<Tabs>\n  <Tabs.List>\n    <Tabs.Tab>One</Tabs.Tab>\n    <Tabs.Tab>Two</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel>Content 1</Tabs.Panel>\n  <Tabs.Panel>Content 2</Tabs.Panel>\n</Tabs>;\n```\n\n### Custom Hooks\n\nExtract reusable logic:\n\n```tsx\nfunction useDebounce<T>(value: T, delay = 500): T {\n  const [debouncedValue, setDebouncedValue] = useState(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n\n// Usage\nconst debouncedSearch = useDebounce(searchTerm, 300);\n```\n\n### Render Props\n\nShare rendering logic:\n\n```tsx\nfunction DataFetcher({ url, render }) {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    fetch(url)\n      .then((r) => r.json())\n      .then(setData)\n      .finally(() => setLoading(false));\n  }, [url]);\n\n  return render({ data, loading });\n}\n\n// Usage\n<DataFetcher\n  url=\"/api/users\"\n  render={({ data, loading }) =>\n    loading ? <Spinner /> : <UserList users={data} />\n  }\n/>;\n```\n\n---\n\n## Next.js Optimization\n\nReference: `references/nextjs_optimization_guide.md`\n\n### Server vs Client Components\n\nUse Server Components by default. Add 'use client' only when you need:\n\n- Event handlers (onClick, onChange)\n- State (useState, useReducer)\n- Effects (useEffect)\n- Browser APIs\n\n```tsx\n// Server Component (default) - no 'use client'\nasync function ProductPage({ params }) {\n  const product = await getProduct(params.id); // Server-side fetch\n\n  return (\n    <div>\n      <h1>{product.name}</h1>\n      <AddToCartButton productId={product.id} /> {/* Client component */}\n    </div>\n  );\n}\n\n// Client Component\n(\"use client\");\nfunction AddToCartButton({ productId }) {\n  const [adding, setAdding] = useState(false);\n  return <button onClick={() => addToCart(productId)}>Add</button>;\n}\n```\n\n### Image Optimization\n\n```tsx\nimport Image from 'next/image';\n\n// Above the fold - load immediately\n<Image\n  src=\"/hero.jpg\"\n  alt=\"Hero\"\n  width={1200}\n  height={600}\n  priority\n/>\n\n// Responsive image with fill\n<div className=\"relative aspect-video\">\n  <Image\n    src=\"/product.jpg\"\n    alt=\"Product\"\n    fill\n    sizes=\"(max-width: 768px) 100vw, 50vw\"\n    className=\"object-cover\"\n  />\n</div>\n```\n\n### Data Fetching Patterns\n\n```tsx\n// Parallel fetching\nasync function Dashboard() {\n  const [user, stats] = await Promise.all([getUser(), getStats()]);\n  return <div>...</div>;\n}\n\n// Streaming with Suspense\nasync function ProductPage({ params }) {\n  return (\n    <div>\n      <ProductDetails id={params.id} />\n      <Suspense fallback={<ReviewsSkeleton />}>\n        <Reviews productId={params.id} />\n      </Suspense>\n    </div>\n  );\n}\n```\n\n---\n\n## Accessibility and Testing\n\nReference: `references/frontend_best_practices.md`\n\n### Accessibility Checklist\n\n1. **Semantic HTML**: Use proper elements (`<button>`, `<nav>`, `<main>`)\n2. **Keyboard Navigation**: All interactive elements focusable\n3. **ARIA Labels**: Provide labels for icons and complex widgets\n4. **Color Contrast**: Minimum 4.5:1 for normal text\n5. **Focus Indicators**: Visible focus states\n\n```tsx\n// Accessible button\n<button\n  type=\"button\"\n  aria-label=\"Close dialog\"\n  onClick={onClose}\n  className=\"focus-visible:ring-2 focus-visible:ring-blue-500\"\n>\n  <XIcon aria-hidden=\"true\" />\n</button>\n\n// Skip link for keyboard users\n<a href=\"#main-content\" className=\"sr-only focus:not-sr-only\">\n  Skip to main content\n</a>\n```\n\n### Testing Strategy\n\n```tsx\n// Component test with React Testing Library\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\n\ntest(\"button triggers action on click\", async () => {\n  const onClick = vi.fn();\n  render(<Button onClick={onClick}>Click me</Button>);\n\n  await userEvent.click(screen.getByRole(\"button\"));\n  expect(onClick).toHaveBeenCalledTimes(1);\n});\n\n// Test accessibility\ntest(\"dialog is accessible\", async () => {\n  render(<Dialog open={true} title=\"Confirm\" />);\n\n  expect(screen.getByRole(\"dialog\")).toBeInTheDocument();\n  expect(screen.getByRole(\"dialog\")).toHaveAttribute(\"aria-labelledby\");\n});\n```\n\n---\n\n## Quick Reference\n\n### Common Next.js Config\n\n```js\n// next.config.js\nconst nextConfig = {\n  images: {\n    remotePatterns: [{ hostname: \"cdn.example.com\" }],\n    formats: [\"image/avif\", \"image/webp\"],\n  },\n  experimental: {\n    optimizePackageImports: [\"lucide-react\", \"@heroicons/react\"],\n  },\n};\n```\n\n### Tailwind CSS Utilities\n\n```tsx\n// Conditional classes with cn()\nimport { cn } from \"@/lib/utils\";\n\n<button\n  className={cn(\n    \"px-4 py-2 rounded\",\n    variant === \"primary\" && \"bg-blue-500 text-white\",\n    disabled && \"opacity-50 cursor-not-allowed\",\n  )}\n/>;\n```\n\n### TypeScript Patterns\n\n```tsx\n// Props with children\ninterface CardProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\n// Generic component\ninterface ListProps<T> {\n  items: T[];\n  renderItem: (item: T) => React.ReactNode;\n}\n\nfunction List<T>({ items, renderItem }: ListProps<T>) {\n  return <ul>{items.map(renderItem)}</ul>;\n}\n```\n\n---\n\n## Resources\n\n- React Patterns: `references/react_patterns.md`\n- Next.js Optimization: `references/nextjs_optimization_guide.md`\n- Best Practices: `references/frontend_best_practices.md`\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":["senior","frontend","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-senior-frontend","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/senior-frontend","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 · 34583 github stars · SKILL.md body (11,975 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-22T18:52:13.584Z","embedding":null,"createdAt":"2026-04-18T21:44:14.352Z","updatedAt":"2026-04-22T18:52:13.584Z","lastSeenAt":"2026-04-22T18:52:13.584Z","tsv":"'-100':558 '-2':960,1089 '-4':1087 '-50':1102 '-59':585 '-69':578 '-79':572 '-89':566 '/api/users':754 '/hero.jpg':852 '/lib/utils':448,1082 '/path/to/project':492 '/react':993 '/user-event':1000 '0':584,659 '1':165,337,482,674,904,932,1024 '1200':856 '12kb':513,609 '14':232 '14kb':623 '2':183,348,493,676,910 '290kb':508,605 '2kb':516,612 '3':201,359,527,917 '300':714 '3kb':628 '4':216,376,536,927 '4.5':931 '5':936 '500':688,967,1096 '60':577 '600':858 '70':571 '71kb':518,614 '75/100':503 '80':565 '87kb':630 '90':557 'access':30,101,136,140,897,902,943,1026,1030 'accessibility-and-test':139 'action':556,1004 'activ':656,663 'ad':828 'add':184,247,252,259,267,775,837 'addtocart':835 'addtocartbutton':815,825 'advanc':89 'allow':1106 'alt':853 'altern':509,519,603 'analysi':122,125,468 'analyz':23,76,469,485,595 'api':188,200,251,255,633,792 'api/health/route.ts':298 'app':180,213,234,284,285 'appli':528 'applic':14,48,83 'aria':918,949,1047 'aria-label':948 'aria-labelledbi':1046 'ask':1180 'async':401,800,870,884,1007,1031 'attent':583 'auth':187,199,246 'authent':249 'autom':44 'avail':570 'await':806,876,1017 'axio':622 'b':567 'bash':175,192,209,221,342,353,366,381,489,547 'best':157,1144 'bg':1094 'bg-blue':1093 'blue':966,1095 'boundari':1188 'browser':791 'build':17 'bundl':24,79,121,124,467,475,480,500,551,560,588 'bundle-analysi':123 'button':301,345,457,833,944,945,947,1002,1012,1020,1083 'buttonprop':450,460 'c':504,573 'card':303 'cardprop':1114 'cd':210 'cdn.example.com':1061 'check':544 'checklist':903 'children':453,459,466,654,665,1112,1117 'clarif':1182 'class':1076 'classnam':451,458,463,465,955,1084,1115 'clear':1155 'cleartimeout':703 'click':1006,1015 'client':256,340,392,393,397,440,768,777,799,818,820,823 'close':951 'cn':313,446,464,1078,1080,1085 'code':34 'color':928 'common':598,1051 'complex':925 'complianc':102 'compon':19,70,94,116,119,238,299,321,325,336,341,352,394,403,436,645,650,769,772,795,819,821,980,1120 'component-gener':118 'compound':93,644 'condit':1075 'config':1053 'configur':159 'confirm':1037 'const':652,655,690,696,710,725,730,804,827,873,1008,1056 'constant':314 'content':110,673,675,976 'contrast':929 'creat':161,277,333,422,433 'criteria':1191 'critic':587 'css':13,65,155,296,1072 'cursor':1104 'cursor-not-allow':1103 'custom':72,379,406,677 'd':579 'dashboard':195,872 'data':726,749,756,761,864 'datafetch':722,752 'date':511,607 'date-fn':510,606 'dayj':515,611 'debouncedsearch':711 'debouncedvalu':691,708 'default':398,774,796 'delay':687,701,706 'depend':208,506,535,576,592 'describ':1159 'descript':228,390 'detect':593 'dev':224 'develop':5,39,219 'dialog':952,1028,1033,1040,1044 'dir':346,425 'disabl':1100 'div':462 'dom':632 'dri':272,429 'dry-run':271,428 'effect':789 'element':909,915 'ensur':100 'environ':1171 'environment-specif':1170 'es':522,617 'event':782 'exampl':437 'expect':1021,1038,1042 'experiment':1065 'expert':1176 'export':455 'extract':679 'f':586 'fallback':893 'fals':745,831 'featur':186,198,245,250,257,265 'fetch':625,736,812,865,869 'file':275,365,414,434 'fill':863 'final':743 'fix':531 'flat':421 'fns':512,608 'focus':916,937,940,957,962 'focus-vis':956,961 'fold':847 'font':290 'footer':306 'form':189,258,262 'format':1062 'formvalid':384 'frontend':3,4,27,33,37,38,82,163 'function':456,683,721,801,824,871,885,1129 'generat':68,117,120,145,279,322,323,338,349,360,377,387,435 'generic':1119 'getproduct':807 'getstat':879 'getus':878 'globals.css':294 'grade':555 'handler':783 'header':305 'health':496,501 'heavi':505,534,575,591,599 'height':857 'hero':854 'heroicons/react':1070 'home':292 'hook':73,261,308,380,386,405,408,678 'hostnam':1060 'html':906 'icon':923 'id':890 'identifi':596 'imag':838,842,850,861,1058 'image/avif':1063 'image/webp':1064 'immedi':849 'implement':29,86,104 'import':441,445,545,841,986,994,1079 'includ':412,418 'indic':938 'input':302,1185 'instal':207,215 'interact':914 'interfac':317,449,1113,1121 'interpret':553 'issu':499,581 'item':1123,1126,1131 'items.map':1135 'jqueri':629 'js':1054 'keyboard':911,971 'ky':627 'label':919,921,950 'labelledbi':1048 'larg':635 'layout':288,304 'layout.tsx':286 'lib':311 'librari':270,985,992,999 'like':92 'limit':1147 'link':969 'list':1130 'listprop':1122,1133 'load':731,750,757,758,848 'lodash':517,521,613,616 'lodash-':520,615 'logic':681,719 'lucid':1068 'lucide-react':1067 'main':975 'match':1156 'minimum':930 'minor':568 'miss':1193 'mode':542 'moment':507,604 'mui/material':634 'multipl':580 'my-app':178,211,282 'name':172 'nativ':624,631 'navig':202,912 'need':582,781 'new':56,69,147,162,335 'next.config.js':319,1055 'next.js':9,21,59,131,148,231,281,762,1052,1141 'next/image':844 'nextauth.js':248 'nextconfig':1057 'nextj':134,182,197,230 'nextjs-optim':133 'normal':934 'npm':214,222 'null':729 'onchang':785 'onclick':784,834,953,1009,1013,1014,1022 'onclos':954 'one':671 'opac':1101 'open':1034 'opportun':477 'optim':20,42,78,132,135,476,479,564,569,763,839,1142 'optimizepackageimport':1066 'option':185,226,227,388,389 'output':424,1165 'packag':600,601 'package.json':320,470 'page':293 'page.tsx':291 'parallel':868 'param':803,887 'params.id':808,891,896 'pattern':40,91,127,130,546,641,866,1108,1139 'perform':22,41 'permiss':1186 'practic':158,1145 'preview':274,431 'primari':1092 'prioriti':859 'problem':590 'product':805 'product.id':817 'product.name':814 'productcard':356 'productdetail':889 'productid':816,826,836,895 'productpag':802,886 'project':28,60,111,114,143,151,164,171,205,472,488 'project-scaffold':113 'promise.all':877 'prop':97,716,1110 'proper':908 'provid':920 'px':1086 'py':1088 'python':176,193,343,354,367,382,490,548 'qualiti':35 'queri':254 'quick':1049 'r':739 'r.json':740 'radix':638 're':538 're-run':537 'react':8,18,57,90,126,129,150,240,241,253,260,324,407,444,640,983,1069,1138 'react-pattern':128 'react.reactnode':454,1118,1128 'react/next.js':47 'recommend':530 'refer':642,764,900,1050 'references/frontend_best_practices.md':901,1146 'references/nextjs_optimization_guide.md':765,1143 'references/react_patterns.md':643,1140 'relat':649 'remotepattern':1059 'render':96,715,718,724,748,755,987,1011,1032 'renderitem':1125,1132,1136 'replac':533,574 'requir':1184 'resourc':1137 'respons':860 'return':461,660,702,707,747,813,832,880,888,1134 'reusabl':680 'review':32,88,494,894,1177 'ring':959,965 'ring-blu':964 'robust':105 'root':287 'round':1090 'router':235 'run':166,223,273,430,483,539 'safeti':1187 'scaffold':26,54,112,115,144,168,225 'scope':1158 'score':497,502,552,554 'screen':988 'screen.getbyrole':1019,1039,1043 'scripts/bundle_analyzer.py':491,549 'scripts/component_generator.py':344,355,368,383 'scripts/frontend_scaffolder.py':177,194 'searchterm':713 'semant':905 'senior':2,36 'senior-frontend':1 'server':220,237,351,358,400,402,766,771,794,810 'server-sid':809 'setact':657,664 'setad':829 'setdata':727,742 'setdebouncedvalu':692,699 'setload':732,744 'settimeout':698 'shadcn/ui':636 'shake':526,621 'share':646,717 'side':811 'sidebar':307 'size':25,80,481,589,602 'skill':6,1150 'skill-senior-frontend' 'skip':968,973 'source-sickn33' 'specif':1172 'src':851 'src/components/ui':347 'start':217 'stat':875 'state':647,786,941 'stop':1178 'stori':331,364,375,417,420 'storybook':191,330,419 'strategi':107,978 'stream':881 'string':452,1116 'structur':280,473 'subdirectori':427 'substitut':1168 'success':1190 'suspens':883,892 'tab':653 'tabl':108 'tablist':667 'tabpanel':669 'tabs.list':666 'tabs.panel':668 'tabscontext.provider':661 'tailwind':12,64,154,295,1071 'tailwind.config.ts':318 'task':1154 'templat':174,181,196,229,239 'test':106,138,142,190,266,269,328,362,372,411,413,899,977,981,984,991,998,1001,1025,1027,1174 'testing-librari':990,997 'text':935,1098 'text-whit':1097 'timer':697,704 'titl':1036 'tobeinthedocu':1041 'tohaveattribut':1045 'tohavebeencalledtim':1023 'tool':45 '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' 'treat':1163 'tree':525,620 'tree-shak':524,619 'trigger':1003 'true':734,1035 'tsx':438,651,682,720,793,840,867,942,979,1074,1109 'two':672 'type':315,357,385,391,399,404,946 'typescript':10,62,153,244,316,327,1107 'ui':300,639 'url':723,737,746,753 'usag':670,709,751 'use':15,51,52,66,74,84,98,396,439,770,776,798,822,907,1148 'usedebounc':309,684,712 'useeffect':695,735,790 'uselocalstorag':310 'user':760,874,972 'usereduc':788 'userev':995 'userevent.click':1018 'userlist':759 'userprofil':369 'usest':442,658,693,728,733,787,830 'util':312,1073 'valid':264,1173 'valu':662,685,694,700,705 'variabl':297 'variant':1091 'verbos':541,550 'vi.fn':1010 'visibl':939,958,963 'vite':242 'vitest':268 'vs':767 'well':563 'well-optim':562 'white':1099 'widget':926 'width':855 'with-stori':373,415 'with-test':370,409 'without':276,426,432 'workflow':160,332,478 'zod':263","prices":[{"id":"0d9bbe37-275b-455a-98b2-e30e1cf7399a","listingId":"b90ed919-1051-4d5a-bd19-166cd730645d","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:44:14.352Z"}],"sources":[{"listingId":"b90ed919-1051-4d5a-bd19-166cd730645d","source":"github","sourceId":"sickn33/antigravity-awesome-skills/senior-frontend","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/senior-frontend","isPrimary":false,"firstSeenAt":"2026-04-18T21:44:14.352Z","lastSeenAt":"2026-04-22T18:52:13.584Z"}],"details":{"listingId":"b90ed919-1051-4d5a-bd19-166cd730645d","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"senior-frontend","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34583,"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-22T06:40:00Z","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":"91b98f178813a950a208c33cca82ba2051a5c55a","skill_md_path":"skills/senior-frontend/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/senior-frontend"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"senior-frontend","description":"Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/senior-frontend"},"updatedAt":"2026-04-22T18:52:13.584Z"}}