skills.rest
nordic96
nordic96COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-dev

Optimizes frontend code and deliverables with precision.

Updated Aug 23, 2026
Search Tags:#typescript#performance#frontend#react#next.js#tailwind css#ui development
One-click install
npx skills add https://github.com/nordic96/portfolio_website --skill frontend-dev-nordic96
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev
Source: https://github.com/nordic96/portfolio_website/tree/main/.claude/agents/frontend-dev
Command: npx skills add https://github.com/nordic96/portfolio_website --skill frontend-dev-nordic96

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides expert frontend development capabilities to build, refactor, optimize, and debug user interfaces using modern web technologies.

Core Features & Use Cases

  • Component Development: Implement new UI components based on design specifications.
  • Code Refactoring: Improve existing code for readability, maintainability, and performance.
  • Performance Optimization: Identify and fix bottlenecks to ensure fast and smooth user experiences.
  • Bug Fixing: Diagnose and resolve UI-related issues across different browsers and devices.
  • Use Case: Implement a new interactive hero section with animations and ensure it's fully responsive and accessible across all target devices.

Quick Start

Use the frontend-dev skill to implement a responsive navigation bar component.

Frequently Asked Questions about frontend-dev

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

FAQPage Schema
How do I implement a responsive React component with TypeScript strictness?▼

Implementing a responsive React component with TypeScript strictness requires building UI elements using Next.js and Tailwind CSS, ensuring mobile-first design, strict type definitions, and adherence to design specifications for optimal accessibility and performance.

What is the best way to optimize Next.js performance for user interfaces?▼

Optimizing Next.js performance for user interfaces involves identifying and fixing rendering bottlenecks, refactoring components for maintainability, and executing visual testing with Playwright to ensure fast, smooth cross-device user experiences.

Can I use Playwright for visual testing in a Tailwind CSS project?▼

Yes, you can use Playwright for visual testing in a Tailwind CSS project to diagnose and resolve UI-related issues, ensuring components render correctly and maintain accessibility across different browsers and target devices.

How do I refactor existing React code for better maintainability?▼

Refactoring existing React code for better maintainability involves improving code readability, optimizing component implementation, and enforcing TypeScript strictness while preserving original UI functionality and design fidelity.

Does TypeScript strictness affect component implementation in Next.js?▼

TypeScript strictness directly affects component implementation in Next.js by enforcing strict type definitions and project constraints, ensuring robust code quality and preventing type-related UI bugs during frontend development.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
pacphipacphi
6

compatibility-testing

Validate web applications across browsers, devices, and cloud platforms with Playwright.

Community
Advanced
tchiphuongtchiphuong

heroui-v3

Create HeroUI v3 UI components with React 19 and Tailwind CSS v4.

Community
Intermediate
zzafergokzzafergok
1

markdown-to-html-skill

Convert Markdown documents to HTML using marked.js, pandoc, gomarkdown, or static site generators.

Community
Intermediate