jinn-frontend-design

Name: jinn-frontend-design
Availability: InStock
Author: hackefeller

Review frontend UI code for accessibility, responsive design, and CSS conventions.

1|Updated Sep 2, 2019

Search Tags:#ui #accessibility #frontend #css #responsive-design #design-patterns #ui-review

Ready to run

npx skills add https://github.com/hackefeller/hominem --skill jinn-frontend-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: jinn-frontend-design
Source: https://github.com/hackefeller/hominem/tree/main/.claude/skills/jinn-frontend-design
Command: npx skills add https://github.com/hackefeller/hominem --skill jinn-frontend-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend design and UI implementation guidance to improve consistency, accessibility, and quality across projects, reducing rework and visual defects.

Core Features & Use Cases

Component architecture guidance and UI composition patterns
CSS frameworks, preprocessors, and naming conventions (e.g., BEM)
Accessibility, responsive design, and performance best practices
Use cases: reviewing existing UI code, creating new components, or refactoring to align with design standards

Quick Start

Ask me to review your frontend components and apply best-practice design patterns to improve UI consistency and accessibility.

Frequently Asked Questions about jinn-frontend-design

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

FAQPage Schema

How do I review existing frontend components for accessibility and responsive design issues?▼

Applying frontend design best practices helps improve UI consistency by enforcing CSS naming conventions, component composition patterns, and accessibility standards. This approach reduces rework by aligning new components with established design guidelines.

What is the best way to structure CSS conventions and component architecture for modern frontend projects?▼

Structuring CSS conventions and component architecture for modern frontend projects involves applying established patterns like BEM and UI composition rules. This ensures scalable styling, maintainable code, and consistent visual quality across the application.

Can I use this frontend design guidance for refactoring UI code to meet accessibility standards?▼

Yes, you can use this frontend design guidance for refactoring UI code to meet accessibility standards. It evaluates existing components and applies design patterns to align your project with robust accessibility and responsive design requirements.

Does frontend UI review require specific frameworks or dependencies to evaluate component architecture?▼

Frontend UI review does not require specific frameworks or dependencies to evaluate component architecture. It provides framework-agnostic design guidance, applying CSS conventions and performance best practices directly to your project's UI composition.

When should I not use automated frontend design patterns for UI refactoring?▼

You should reconsider automated frontend design patterns for UI refactoring when a project requires highly bespoke visual interactions that deviate from standard responsive design or accessibility best practices, as generic guidance may not capture custom behavioral nuances.