skills.rest
AhmedMelaih
AhmedMelaihCOMMUNITY
Explore all skills by this author →
GitHub

Recreate Ahmed Melaih's Portfolio

Recreate Ahmed Melaih's dark-themed portfolio with design tokens and vanilla JavaScript.

Updated Apr 2, 2025
Search Tags:#design tokens#portfolio#frontend development#design fidelity#HTML/CSS#vanilla JavaScript#component templates
One-click install
npx skills add https://github.com/AhmedMelaih/ahmedmelaih.github.io --skill recreate-ahmed-melaih-s-portfolio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Recreate Ahmed Melaih's Portfolio
Source: https://github.com/AhmedMelaih/ahmedmelaih.github.io/tree/main
Command: npx skills add https://github.com/AhmedMelaih/ahmedmelaih.github.io --skill recreate-ahmed-melaih-s-portfolio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill eliminates the guesswork and inconsistency when recreating Ahmed Melaih's professional portfolio, ensuring the rebuilt version matches the original's dark-themed, developer-aesthetic design and functionality exactly, without manual trial and error.

Core Features & Use Cases

  • Design Token Enforcement: Automatically applies the exact color palette, typography scale, spacing, and animation rules defined in DESIGN.md to maintain visual consistency across all components.
  • Component Templates: Provides pre-built, fidelity-checked templates for project cards, timeline entries, and other UI elements that match the reference implementation in index.html.
  • Use Case: A developer migrating the portfolio to a modern framework like React or Next.js can use this Skill to generate pixel-perfect components that adhere to the original design system, cutting development time significantly compared to building from scratch.

Quick Start

Use the recreate portfolio skill to generate a new project card for a credit card fraud detection project using the provided template and project data from the content inventory.

Frequently Asked Questions about Recreate Ahmed Melaih's Portfolio

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

FAQPage Schema
How do I recreate a dark-themed portfolio using HTML, CSS, and vanilla JavaScript?▼

Recreate a dark-themed portfolio by enforcing strict design tokens for color, typography, and spacing alongside pre-built component templates. This approach eliminates manual effort and ensures visual fidelity to the original reference implementation using vanilla JavaScript.

How do I maintain design fidelity when migrating a portfolio to a modern framework?▼

Maintain design fidelity during portfolio migration by applying predefined design tokens and fidelity-checked component templates. This enforces strict adherence to the original visual system, ensuring pixel-perfect components without manual trial and error.

Can I generate isolated UI components for a single-page portfolio without rebuilding the whole site?▼

Yes, you can generate isolated UI components like project cards and timeline entries using pre-built templates. This supports isolated component generation for personal web projects while matching the reference implementation's design system.

What are design tokens and how do they apply to frontend development?▼

Design tokens are defined variables for color palettes, typography scales, spacing, and animation rules. Applying them in frontend development ensures visual consistency across all portfolio components and eliminates design inconsistencies.

Does this portfolio recreation approach work with vanilla JavaScript or do I need a framework?▼

This approach works directly with vanilla JavaScript interaction patterns and HTML/CSS. You do not need a modern framework to generate components, though the templates can be used for migrating to frameworks like React or Next.js.

Why do my manually recreated portfolio components look visually inconsistent?▼

Manually recreated portfolio components look visually inconsistent due to guesswork in applying the design system. Enforcing strict design tokens and using pre-built component templates eliminates this manual effort and ensures exact visual fidelity.

Related Skills

Explore More Software Engineering Skills→
jwyniajwynia

frontend-design

Analyze CSS/HTML foundations and generate design tokens, palettes, typography, and component templates.

Community
Advanced
maplin-comaplin-co

mockup-to-code

Convert UI mockups and design files into React, Vue, or HTML/CSS code.

Official
Advanced
yonatangrossyonatangross
217

figma-design-handoff

Extract Figma design tokens and generate TypeScript component interfaces.

Community
Advanced
JaylaelikeJaylaelike

foundry-nextgen-frontend

Build Foundry-themed frontend interfaces using Vite, React, and pnpm.

Community
Advanced