playbooks

home / skills / vadimcomanescu / codex-skills / senior-frontend

senior-frontend skill

/skills/.experimental/platform/senior-frontend

This skill helps you build production-ready frontend features with React, Next.js, and TypeScript, emphasizing performance, accessibility, and scalable UI.

This is most likely a fork of the senior-frontend skill from nilecui
npx playbooks add skill vadimcomanescu/codex-skills --skill senior-frontend

Review the files below or copy the command above to add this skill to your agents.

Files (9)
SKILL.md
1.1 KB
---
name: senior-frontend
description: Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
---

# Senior Frontend

Ship production-ready frontend changes with clear structure, performance, and accessibility.

## Quick Start
- Generate components: `scripts/component_generator.py`
- Analyze bundles: `scripts/bundle_analyzer.py`
- Scaffold frontend: `scripts/frontend_scaffolder.py`

## Workflow
1) Define the UI goal and user flow.
2) Build semantic structure and state management.
3) Optimize performance (rendering, bundle size, images).
4) Validate a11y and responsive behavior.

## References
- React patterns: `references/react_patterns.md`
- Next.js optimization: `references/nextjs_optimization_guide.md`
- Frontend best practices: `references/frontend_best_practices.md`
- Extended examples: `references/examples.md`

Overview

This skill provides a comprehensive senior-level frontend toolkit for building modern, performant web applications with React, Next.js, TypeScript, and Tailwind CSS. It focuses on component scaffolding, performance optimization, accessibility, and pragmatic UI best practices to ship production-ready features. Use it to accelerate development, enforce structure, and reduce regressions in frontend projects.

How this skill works

The skill scaffolds components and page layouts, enforces semantic structure, and sets up sensible state management patterns. It includes tooling for bundle analysis, rendering optimization, image and asset handling, and accessibility validation. Scripts and guides help generate components, analyze bundles, and scaffold consistent project structure to keep code maintainable and performant.

When to use it

  • Starting a new feature or page that needs a consistent structure and accessible UI
  • Scaffolding components with TypeScript and Tailwind conventions for reuse
  • Diagnosing slow pages via bundle analysis and runtime render profiling
  • Optimizing Next.js builds, image delivery, and client/server boundaries
  • Conducting code reviews focused on accessibility, responsiveness, and performance

Best practices

  • Design semantic markup first, then layer state and styles to avoid over-rendering
  • Prefer server-side rendering or static generation for SEO-critical pages and hydrate selectively
  • Split code at the route and component level to reduce initial bundle size
  • Use typed props and small, focused components to improve testability and reuse
  • Run bundle and Lighthouse audits regularly; address high-impact issues first

Example use cases

  • Generate a typed UI component library with consistent Tailwind utility classes
  • Analyze a production build to identify and remove large dependency pulls
  • Refactor a slow page by introducing memoization, lazy loading, and image optimization
  • Implement accessible form controls and keyboard navigation for a complex flow
  • Scaffold a new Next.js route with proper data fetching strategy and responsive layout

FAQ

Does this skill enforce a specific state management library?

No. It recommends patterns (local state hooks, context, or server-modern approaches) and scaffolds structure to integrate your preferred solution.

Can it help reduce bundle size quickly?

Yes. Use the bundle analysis tools to find large imports, then apply code-splitting, dynamic imports, and dependency replacements to cut size.