skills.rest
hackutd
hackutdOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-design

Create mobile-first React visual designs with black-and-white hierarchy and Bebas Neue typography.

5|3|Updated Jan 22, 2026
Search Tags:#mobile-first#design system#tailwind css#frontend design#react ui#hacker interface#nike-inspired
One-click install
npx skills add https://github.com/hackutd/harp --skill frontend-design-hackutd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/hackutd/harp/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/hackutd/harp --skill frontend-design-hackutd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents inconsistent or generic hacker-facing interfaces by providing a clear visual system for building premium, mobile-first HARP experiences with strong hierarchy and purposeful interaction design.

Core Features & Use Cases

  • Nike-Inspired Visual Language: Apply bold black-and-white contrast, athletic typography, generous spacing, and sharp-cornered layouts.
  • Reusable UI Patterns: Design consistent page scaffolds, buttons, forms, cards, progress indicators, status badges, and responsive navigation.
  • Mobile-First Interaction Design: Create thumb-friendly interfaces with safe-area support, tactile feedback, restrained transitions, and accessible touch targets.
  • Use Case: Redesign a hacker application status page so it feels cohesive with the rest of HARP while clearly communicating application state and next actions.

Quick Start

Use the frontend-design skill to redesign the hacker application dashboard as a bold, mobile-first Nike-inspired interface following HARP's typography, spacing, color, and component guidelines.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I design a mobile-first hacker interface for React components?▼

To design a mobile-first hacker interface, apply black-and-white visual hierarchy, Bebas Neue and Inter typography, sharp-cornered components, and safe-area spacing to your React UI. This approach ensures accessible touch targets and thumb-friendly layouts for hacker-facing dashboards.

Does this frontend design approach work with Tailwind CSS and React UI components?▼

Yes, this frontend design approach works with Tailwind CSS and React UI components to apply mobile-first responsive layouts. It enforces specific typography rules like Bebas Neue and Inter, alongside restrained CSS motion, to produce production-grade hacker-facing interfaces.

How do I ensure my mobile-first interface has accessible touch targets and safe-area spacing?▼

Ensure your mobile-first interface has accessible touch targets and safe-area spacing by applying tactile feedback, thumb-friendly interaction design, and safe-area support. This prevents inconsistent layouts and guarantees purposeful interaction design across varying mobile device dimensions.

What typography and color constraints are required for HARP frontend design?▼

HARP frontend design requires a strict black-and-white color palette for visual hierarchy and sharp-cornered components. Typography must use Bebas Neue and Inter fonts to establish a bold, athletic, Nike-inspired visual language across all hacker-facing application flows.

Related Skills

Explore More Design & Creative Skills→
wyattowalshwyattowalsh
4

frontend-designer

Design, scaffold, refactor, and audit React frontend codebases with Tailwind CSS v4 and shadcn/ui.

Community
Advanced
hackutdhackutd
5

frontend

Build React 19 frontend pages with TypeScript, Zustand, and shadcn/ui.

Official
Advanced
NymfariousNymfarious
1

optimizing-mobile-experience

Optimize StickerNest for mobile touch interactions and responsive layouts.

Community
Advanced
jshsakurajshsakura
22

ui-designer

Convert design goals into concrete layout, interaction, and component recommendations.

Community
Advanced