skills.rest
abdusamaraie
abdusamaraieCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend

Implement React Native Expo and Next.js components from design specifications.

Updated Mar 10, 2026
Search Tags:#typescript#accessibility#frontend#next.js#ui components#react native#expo
One-click install
npx skills add https://github.com/abdusamaraie/codememo.app --skill frontend-abdusamaraie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/abdusamaraie/codememo.app/tree/main/.claude/skills/frontend
Command: npx skills add https://github.com/abdusamaraie/codememo.app --skill frontend-abdusamaraie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers turn approved UI designs and product requirements into consistent, production-ready React Native and Next.js interfaces while avoiding common implementation mistakes.

Core Features & Use Cases

  • Cross-Platform UI Implementation: Creates React Native Expo and Next.js components using project conventions, shared packages, and reusable patterns.
  • Quality-Focused Development: Enforces theme usage, internationalization, accessibility, testing identifiers, and structured component organization.
  • Use Case: A developer can provide a completed screen design and use this Skill to generate implementation code, required translation keys, and testID documentation that matches the application architecture.

Quick Start

Use the frontend skill to implement the provided screen design as a production-ready React Native or Next.js component.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I build production-ready React Native Expo components from design specs?▼

To build production-ready React Native Expo components from design specs, you implement screens using project conventions, shared packages, and reusable patterns while enforcing theme tokens, accessibility, and strict styling rules.

How do I implement internationalization and accessibility in Next.js UI components?▼

Implementing internationalization and accessibility in Next.js UI components requires supplying i18n resources and applying accessibility standards during development to generate compliant, maintainable interface code.

Can I use this to generate cross-platform screens for both React Native and Next.js?▼

Yes, you can generate cross-platform screens for both React Native and Next.js by applying shared component structure standards and application architecture integration patterns to ensure consistency.

What do I need to provide to generate maintainable UI components with TypeScript?▼

To generate maintainable UI components with TypeScript, you need to provide theme tokens, i18n resources, component structure standards, test identifiers, and strict styling conventions.

Why are my frontend UI implementations inconsistent with my application architecture?▼

Frontend UI implementations become inconsistent with application architecture when they bypass shared packages, theme tokens, and structured component organization required for maintainable cross-platform screens.

What is the best way to structure reusable React Native components for cross-platform apps?▼

The best way to structure reusable React Native components for cross-platform apps is enforcing structured component organization, test identifiers, and strict styling conventions to ensure maintainable UI implementation.

Related Skills

Explore More Software Engineering Skills→
STAR03-byteSTAR03-byte
1

ckm:design-system

Generate CSS variables from tokens.json using a three-layer design token architecture.

Community
Advanced
kurokeitakurokeita
1

react-native-testing

Standardize React Native testing with Jest and React Native Testing Library patterns.

Community
Intermediate
treesus6treesus6
1

sq-mobile-dev

Enforce React Native/Expo development standards for SkateQuest-Mobile UI components.

Community
Intermediate
OMIXECOMIXEC
1

senior-frontend

Automate React/Next.js frontend engineering decisions for scaffolding, performance, and accessibility.

Community
Advanced