skills.rest
TarunTeja44
TarunTeja44COMMUNITY
Explore all skills by this author →
GitHub

frontend-developer

Implements responsive React and Tailwind CSS interfaces with accessibility and performance standards.

1|Updated Feb 22, 2026
Search Tags:#typescript#accessibility#frontend#react#design system#tailwind css#web performance
One-click install
npx skills add https://github.com/TarunTeja44/portfolio --skill frontend-developer-tarunteja44
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/TarunTeja44/portfolio/tree/main/.agents/skills/frontend-developer
Command: npx skills add https://github.com/TarunTeja44/portfolio --skill frontend-developer-tarunteja44

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building modern web interfaces requires juggling design systems, component architecture, responsive layouts, accessibility compliance, and performance optimization all at once. This Skill provides a structured runbook and reference guides so frontend work follows consistent, high-quality standards instead of ad-hoc decisions. ## Core Features & Use Cases - Six-Phase Development Workflow: Guides implementation from UX analysis through design tokens, component composition, state management, motion polish, and final accessibility/performance audits. - Design System Foundations: Provides typography scales, color palettes, glassmorphism patterns, elevation layers, and 8pt spacing grids for cohesive visual design. - React & TypeScript Patterns: Includes reusable component primitives (Button, Tabs), custom hooks (useDebounce, useMediaQuery), compound component patterns, and class composition with clsx and tailwind-merge. - Performance & Accessibility Auditing: Covers Core Web Vitals targets (LCP, INP, CLS), React memoization strategies, and a WCAG 2.1 AA checklist for contrast, keyboard navigation, and ARIA. - Use Case: When asked to build a dashboard page, the agent follows the workflow to define design tokens, compose typed components, add Framer Motion transitions, and verify keyboard navigation and contrast ratios before finishing. ## Quick Start Build a responsive pricing page with React, Tailwind CSS, and smooth animations following the frontend developer workflow.

Frequently Asked Questions about frontend-developer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible React components with Tailwind CSS?▼

Use semantic HTML elements, forwardRef for reusable primitives, and visible focus-visible ring styles on interactive elements. The component patterns reference shows a Button primitive with variants, loading states, and proper disabled handling built with clsx and tailwind-merge.

How to structure a frontend project with design tokens?▼

Define CSS custom properties or Tailwind theme values for colors, typography, spacing, and border radii before building components. Use an 8pt spacing grid, consistent radii scales, and semantic color roles for primary, accent, neutral, and status colors.

What are the Core Web Vitals targets for web performance?▼

Largest Contentful Paint should be under 2.5 seconds, Interaction to Next Paint under 200 milliseconds, and Cumulative Layout Shift under 0.1. Achieve these through route-level code splitting, targeted memoization, image dimension attributes, and list virtualization.

Does Framer Motion support reduced motion accessibility?▼

Yes, Framer Motion provides the useReducedMotion hook to detect the user's prefers-reduced-motion setting. Use it to set animation durations to zero when reduced motion is preferred, or apply a global CSS media query that neutralizes transitions.

When should I use useMemo and useCallback in React?▼

Apply useMemo only for expensive computations like sorting or filtering large datasets, and useCallback when passing callbacks to memoized child components. Wrapping every value adds overhead without benefit, so memoization should be targeted rather than universal.

Related Skills

Explore More Software Engineering Skills→
SkobynSkobyn

ui-ux-designer

Create accessible UI components and design systems for web and mobile products.

Community
Advanced
mf-dynatracemf-dynatrace

dt-obs-frontends

Monitor and analyze web and mobile frontend performance using DQL.

Community
Advanced
bingeli1379bingeli1379
2

playwright

Automate browser testing and end-to-end UI verification with Playwright.

Community
Advanced
questpiequestpie
5

questpie-admin/blocks

Define reusable server-side blocks with fields and admin metadata for QUESTPIE page builders.

Official
Advanced