front-end-skill_skill

This skill guides front-end tasks in Next.js with Tailwind, Framer Motion, and UI/UX best practices to deliver instant, trusted, delightful fintech interfaces.

TypeScript

2

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill 0xgeorgemathew/splithub --skill front-end-skill

SKILL.md3.7 KB

Overview

This skill helps frontend engineers build the Next.js-based UI for SplitHub’s tap-to-pay app. It focuses on component work inside packages/nextjs/, enforcing distinctive typography, coherent theming, and responsive, tactile interactions. Use it to create pages, components, animations, and mobile-first UX that feel instant and trustworthy.

How this skill works

The skill inspects and guides work in packages/nextjs/, recommending patterns, fonts, Tailwind usage, and animation approaches. It enforces aesthetic rules (no generic AI defaults), suggests font pairings and color strategies, and outlines where components, hooks, and services live. It also provides a practical implementation checklist to validate responsiveness, loading states, and NFC interaction feedback.

When to use it

Creating or modifying React components under packages/nextjs/
Building new pages, layouts, or app routes with Next.js App Router
Styling with Tailwind CSS and defining theme variables
Implementing animations with Framer Motion for key interactions
Designing NFC/tap payment flows and tactile feedback
Improving UI/UX for financial trust and clarity

Best practices

Check existing components in packages/nextjs/components/ for established patterns before adding new ones
Choose distinctive Google Fonts via next/font/google; avoid Inter, Roboto, Open Sans, Lato, Space Grotesk
Commit to a cohesive color system using CSS variables or Tailwind config and a dominant color with sharp accents
Favor a small number of high-impact animations using framer-motion; reserve CSS transitions for micro-interactions
Design mobile-first and ensure NFC/tap flows feel instant with clear loading and success states
Provide explicit loading, error, and empty states; test on real devices for tactile feedback

Example use cases

Create a responsive settle/payment flow component with staged framer-motion reveals and tangible tap feedback
Build a dashboard page using distinctive editorial and monospace font pairing loaded in layout via next/font/google
Implement a cohesive dark theme using CSS variables, layered gradients, and subtle depth effects
Refactor POS terminal UI in components/credits/ to follow shared Tailwind tokens and provide clear loading/error states
Add accessible, performant animations to the activity/receipt UI with staggered reveal sequences

FAQ

Use distinctive families like JetBrains Mono, Playfair Display, IBM Plex, or Outfit and load them in the root layout via next/font/google for consistent rendering.

When should I use framer-motion vs CSS transitions?

Use framer-motion for orchestrated, high-impact animations (page loads, staggered reveals). Use CSS transitions for simple hover/focus states to keep interactions performant.