congiuluc/frontend-react
skills/frontend-react/SKILL.md
Build React 19 + TypeScript + Vite frontend with TailwindCSS v4. Use when: creating components, pages, hooks, services, routing, state management, API integration, or frontend project structure.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add congiuluc/my-awesome-copilot frontend-reactInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 1:22 PM4.6s4 files scanned
SKILL.md
- name:
- frontend-react
- description:
- Build React 19 + TypeScript + Vite frontend with TailwindCSS v4. Use when: creating components, pages, hooks, services, routing, state management, API integration, or frontend project structure.
- argument-hint:
- Describe the component, page, hook, or feature to build.
Frontend React TypeScript
When to Use
- Creating or modifying React components
- Building new features, pages, or shared components
- Configuring Vite, TypeScript, or TailwindCSS
- Integrating with backend API endpoints
Official Documentation
- React 19
- Vite
- TypeScript Handbook
- TailwindCSS v4
- React Router
Procedure
- Determine file location using project structure
- Follow component patterns for all UI code
- Apply TypeScript conventions
- Review sample component for complete pattern
- Style with TailwindCSS v4 — mobile-first responsive
- Ensure accessibility (see
accessibilityskill) - Handle loading, error, and empty states for data-fetching components
- Preload images during data loading — see image preloading
- Create corresponding tests (see
testingskill)
Image Preloading During Data Loading
Whenever a component fetches data that contains image URLs, always preload images during the loading phase so they display instantly when the skeleton/spinner is dismissed.
Use the useImagePreload hook (below) or <link rel="preload"> for critical above-the-fold images.
See component patterns – image preloading for the hook and usage examples.
Related Skills
congiuluc/vscode-extension
tools
VerifiedTrustedCommunity
Build VS Code extensions with TypeScript. Covers extension anatomy, activation events, commands, tree views, webview panels, language features, testing, and publishing. Use when: creating a new VS Code extension, adding commands/views/providers, building webview UIs, implementing language server features, testing extensions, or packaging for the marketplace.
SKILL.mdUpdated Apr 16, 2026
congiuluc/version-tracking
development
VerifiedTrustedCommunity
Track implementations, features, bugs, and releases in a versioning document. Use when: adding a commit, completing a feature, fixing a bug, or preparing a release. Automatically updates CHANGELOG.md following Keep a Changelog format and Semantic Versioning.
SKILL.mdUpdated Apr 16, 2026
congiuluc/testing-frontend
development
VerifiedTrustedCommunity
Write frontend tests using Vitest and React Testing Library. Use when: testing React components, hooks, user interactions, form submissions, accessibility assertions, or mocking API services.
SKILL.mdUpdated Apr 16, 2026
congiuluc/testing-frontend-angular
development
VerifiedTrustedCommunity
Write Angular frontend tests using Jasmine, Karma, and Angular TestBed. Use when: testing Angular components, services, pipes, directives, user interactions, form submissions, accessibility assertions, or mocking HTTP services.
SKILL.mdUpdated Apr 16, 2026