skills.rest
ebecerra-developer
ebecerra-developerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

legacy-vite-codebase

Documents conventions and color palette of the legacy React and Vite codebase before Next.js migration.

Updated Mar 6, 2026
Search Tags:#frontend#react#design tokens#vite#legacy code#css conventions#next.js migration
One-click install
npx skills add https://github.com/ebecerra-developer/ebecerra-web --skill legacy-vite-codebase-ebecerra-developer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: legacy-vite-codebase
Source: https://github.com/ebecerra-developer/ebecerra-web/tree/main/.agents/skills/legacy-vite-codebase
Command: npx skills add https://github.com/ebecerra-developer/ebecerra-web --skill legacy-vite-codebase-ebecerra-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When editing a legacy React + Vite codebase that is mid-migration to Next.js, developers risk breaking visual parity and violating established conventions. This Skill preserves the current stack's coding standards, color palette, and component patterns so hotfixes and ports stay consistent with the live site. ## Core Features & Use Cases - Stack Documentation: Captures the current setup — React 19, Vite 8 (rolldown), plain JavaScript, co-located vanilla CSS, DM Sans and JetBrains Mono fonts, no router, no Tailwind. - Coding Conventions: Defines PascalCase components with co-located .jsx and .css files, kebab-case classes, inline colors, @keyframes animations, clamp() typography, and SVG icons with currentColor. - Hacker-Mode Palette: Provides the full token table (#080808 background, #00ff88 neon green accent, #00ccff blue accent) needed to rebuild the geek mode in Tailwind v4 during Phase 6. - Use Case: When applying a hotfix to src/components/Hero.jsx before Phase 2 of the migration, use this Skill to reuse the global .btn-primary styles and preserve the interactive terminal easter eggs. ## Quick Start Ask the AI to update a component in src/ following the legacy React and Vite conventions and hacker-mode color palette before the Next.js migration completes.

Frequently Asked Questions about legacy-vite-codebase

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

FAQPage Schema
How do I edit legacy React Vite components before a Next.js migration?▼

Follow the documented conventions: PascalCase components with co-located .jsx and .css files in src/components/, kebab-case CSS classes prefixed by component name, and reuse of global .btn-primary styles from App.css. Avoid introducing Tailwind, TypeScript, or CSS Modules before Phase 2.

What color palette does the hacker mode theme use?▼

The palette uses #080808 background, #0d0d0d surfaces, #333 borders, #e0e0e0 main text, #888 muted text, #00ff88 neon green primary accent, #00ccff blue gradient accent, and #fff for titles. These tokens will be preserved in the togglable geek mode after migration.

Does the legacy Vite codebase use Tailwind or TypeScript?▼

No. The current stack is plain JavaScript with vanilla co-located CSS per component. Tailwind, TypeScript, CSS Modules, and styled-components are only introduced later as part of the Next.js migration roadmap.

When should I stop applying these legacy conventions?▼

Apply them only for hotfixes and small adjustments in src/ before Phase 2 of the migration completes, or when porting components that need visual parity with geek mode. After Phase 2, treat the skill as legacy-only reference.

How are icons and animations handled in the legacy components?▼

Icons use inline SVG with currentColor instead of emojis. Animations are defined with @keyframes directly in each component's own .css file, and transitions follow the standard pattern transition: all 0.2s.

Related Skills

Explore More Software Engineering Skills→
zekiriabdzekiriabd
140

starting-a-reverse-eng

Convert legacy source code into evidence-backed SDD_Pro FEATs.

Community
Advanced
muhammaddadumuhammaddadu
1

tailwind-v4-shadcn

Configure Tailwind CSS v4 with shadcn/ui, Vite, React, and dark mode theming.

Community
Advanced
ap05-epicap05-epic

parity-verify

Verify parity between legacy JSP/Java/Struts screens and React equivalents.

Community
Advanced
ceratops-codeceratops-code

ceratops-thread-resume-manual-stop

Resume interrupted in-thread tasks from the current local state.

Official
Intermediate