skills.rest
marjan-ahmed
marjan-ahmedCOMMUNITY
Explore all skills by this author →
Website𝕏@m_marjanahmedGitHub

frontend-designer

Provides guidance for building responsive Angular apps with lazy loading and RxJS-powered data access.

Updated Dec 30, 2025
Search Tags:#accessibility#frontend#CSS#HTML#JavaScript#responsive-design
One-click install
npx skills add https://github.com/marjan-ahmed/nexusfin --skill frontend-designer-marjan-ahmed
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-designer
Source: https://github.com/marjan-ahmed/nexusfin/tree/main/.claude/skills/frontend-designer
Command: npx skills add https://github.com/marjan-ahmed/nexusfin --skill frontend-designer-marjan-ahmed

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides practical, production-ready guidance for building modern, accessible, and responsive web interfaces using vanilla HTML, CSS, and JavaScript. It helps designers and developers avoid heavy frameworks while preserving quality, performance, and correctness.

Core Features & Use Cases

  • Responsive Layouts: Master CSS Grid and Flexbox to create interfaces that adapt smoothly across devices.
  • Semantic & Accessible HTML: Emphasize proper HTML structure and accessible patterns to ensure keyboard navigation and screen-reader friendliness.
  • Production-Ready Patterns: Real-world UI patterns inspired by modern design systems (e.g., Vercel, shadcn/ui) implemented with vanilla HTML/CSS/JS.

Use cases include building marketing landing pages, dashboards, and component libraries with clean, maintainable code.

Quick Start

Create a minimal responsive landing page using vanilla HTML/CSS/JS that includes a hero, a navigation bar, and a responsive card grid.

Frequently Asked Questions about frontend-designer

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

FAQPage Schema
How do I build a responsive web interface without using heavy frameworks?▼

You can build responsive web interfaces using vanilla HTML, CSS, and JavaScript. This approach utilizes CSS Grid and Flexbox to create production-ready layouts that adapt smoothly across devices without framework overhead.

What's the best way to ensure accessible keyboard navigation in vanilla HTML?▼

The best way to ensure accessible keyboard navigation is by using semantic HTML structure. Proper HTML elements natively support screen-reader friendliness and keyboard navigation, eliminating the need for complex JavaScript workarounds.

Can I create production-ready UI patterns using only vanilla HTML, CSS, and JavaScript?▼

Yes, you can create production-ready UI patterns using vanilla HTML, CSS, and JavaScript. These patterns are inspired by modern design systems and work for building marketing landing pages, dashboards, and component libraries.

How do I make a responsive card grid layout with CSS Grid and Flexbox?▼

You make a responsive card grid layout by combining CSS Grid and Flexbox in vanilla CSS. This technique allows interfaces to adapt smoothly across different screen sizes for clean, maintainable code.

Do I need JavaScript frameworks to build modern component libraries?▼

No, you do not need JavaScript frameworks to build modern component libraries. You can craft maintainable libraries using vanilla HTML, CSS, and JavaScript while preserving quality, performance, and correctness.

Why does my frontend design lose performance and quality when using heavy frameworks?▼

Heavy frameworks can introduce unnecessary overhead and complexity. Using vanilla HTML, CSS, and JavaScript helps avoid this bloat while preserving quality, performance, and correctness in modern responsive web interfaces.

Related Skills

Explore More Design & Creative Skills→
levkisslevkiss

dev

Start a local development server for web projects using pnpm.

Community
Basic
samjhechtsamjhecht
4

frontend-design

Generates responsive, accessible HTML/CSS/JS frontend interfaces with bold aesthetic direction.

Community
Advanced
queen-of-codequeen-of-code
8

frontend-web

Guide React, Vue, and vanilla JavaScript frontend architecture with component, state, and performance patterns.

Community
Intermediate
missyouangeledmissyouangeled

frontend-design

Design accessible, responsive HTML/CSS/JS interfaces with design tokens and reusable UI patterns.

Community
Advanced