frontend

Name: frontend
Author: samilozturk

29stars0forks

How to install frontend?

samilozturk/agentlint/frontend

$npx -y skills add samilozturk/agentlint --skill frontend

Installs into the current project.

Summary

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Files · 1

View on GitHub

SKILL.md

1	# Skill: Frontend Design
2
3	## When to Use
4
5	Activate this skill when the user requests:
6
7	- Building web components, pages, or full applications
8	- Creating UI/UX interfaces with modern design
9	- Converting designs to code
10	- Building responsive layouts
11	- Implementing interactive elements
12	- Frontend development with React, TypeScript, or modern frameworks
13
14	Trigger keywords: "build", "create", "frontend", "component", "page", "UI", "interface", "design", "web app"
15
16	Do not activate for backend services, database operations, or CLI applications.
17
18	## Purpose
19
20	Generate production-grade frontend interfaces that are:
21	- Visually distinctive and polished
22	- Built with modern best practices
23	- Responsive and accessible
24	- Interactive and engaging
25	- Avoiding generic AI aesthetics
26
27	## Scope
28
29	### Included
30	- React components with TypeScript
31	- Modern CSS frameworks (Tailwind CSS)
32	- Component libraries (shadcn/ui)
33	- Responsive design patterns
34	- Interactive UI elements
35	- Icon integration (Lucide React)
36	- State management patterns
37	- Form handling and validation
38
39	### Excluded
40	- Backend API development
41	- Database schema design
42	- Server-side rendering configuration
43	- Build tooling setup
44	- Testing framework setup
45
46	## Inputs
47
48	- `requirements`: Description of what to build
49	- `framework`: Target framework (default: React + TypeScript)
50	- `styling`: Styling approach (default: Tailwind CSS)
51	- `components`: Component library preference (default: shadcn/ui)
52	- `features`: Specific functionality requirements
53	- `responsive`: Breakpoint requirements (default: mobile-first)
54
55	## Step-by-step Execution
56
57	1. Requirements Analysis
58	- Parse user requirements and identify core components needed
59	- Determine layout structure and responsive behavior
60	- Identify interactive elements and state requirements
61
62	2. Technology Stack Selection
63	- Use TypeScript for type safety
64	- Apply Tailwind CSS for styling
65	- Integrate shadcn/ui components where appropriate
66	- Include Lucide React for icons
67
68	3. Component Architecture
69	- Create modular, reusable components
70	- Implement proper TypeScript interfaces
71	- Follow React best practices (hooks, composition)
72	- Ensure proper separation of concerns
73
74	4. Styling Implementation
75	- Apply modern design principles
76	- Use consistent spacing and typography scales
77	- Implement responsive breakpoints
78	- Add hover states and transitions
79
80	5. Interactive Features
81	- Implement state management with useState/useReducer
82	- Add form validation where needed
83	- Include loading states and error handling
84	- Add keyboard navigation support
85
86	6. Quality Assurance
87	- Verify TypeScript compilation without errors
88	- Ensure responsive behavior across breakpoints
89	- Test interactive elements and accessibility
90	- Validate design consistency
91
92	## Output Contract
93
94	### Code Structure
95	```
96	ComponentName/
97	├── ComponentName.tsx # Main component
98	├── types.ts # TypeScript interfaces
99	└── index.ts # Export file
100	```
101
102	### Code Quality
103	- Strict TypeScript typing (no `any`)
104	- ESLint compliant code
105	- Consistent naming conventions
106	- Proper component composition
107	- Accessibility attributes (ARIA labels, semantic HTML)
108
109	### Design Quality
110	- Modern, professional appearance
111	- Consistent design system
112	- Responsive across mobile/tablet/desktop
113	- Smooth animations and transitions
114	- Intuitive user experience
115
116	## Verification Commands
117
118	```bash
119	# Type checking
120	npx tsc --noEmit
121
122	# Linting
123	npm run lint
124
125	# Build verification (if applicable)
126	npm run build
127
128	# Format check
129	npx prettier --check src/
130	```
131
132	## Evidence Format
133
134	- Screenshots: Visual proof of responsive design
135	- Code Quality: TypeScript compilation without errors
136	- Accessibility: WCAG compliance verification
137	- Performance: Lighthouse scores (if applicable)
138	- Cross-browser: Testing across modern browsers
139
140	## Safety / DONTs
141
142	### Security
143	- Never hardcode API keys or sensitive data
144	- Sanitize user inputs in forms
145	- Use proper HTTPS for external resources
146	- Validate data before processing
147
148	### Performance
149	- Don't create unnecessarily deep component nesting
150	- Avoid inline styles for complex styling
151	- Don't load unused dependencies
152	- Minimize re-renders with proper React patterns
153
154	### Accessibility
155	- Don't omit alt text for images
156	- Always provide keyboard navigation
157	- Don't use color alone to convey information
158	- Ensure proper heading hierarchy
159
160	### C

People who liked this also viewed

6 picks

Type

frontend

29stars0forks

View on GitHub

How to install frontend?

samilozturk/agentlint/frontend

$npx -y skills add samilozturk/agentlint --skill frontend

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Skill: Frontend Design
2
3	## When to Use
4
5	Activate this skill when the user requests:
6
7	- Building web components, pages, or full applications
8	- Creating UI/UX interfaces with modern design
9	- Converting designs to code
10	- Building responsive layouts
11	- Implementing interactive elements
12	- Frontend development with React, TypeScript, or modern frameworks
13
14	Trigger keywords: "build", "create", "frontend", "component", "page", "UI", "interface", "design", "web app"
15
16	Do not activate for backend services, database operations, or CLI applications.
17
18	## Purpose
19
20	Generate production-grade frontend interfaces that are:
21	- Visually distinctive and polished
22	- Built with modern best practices
23	- Responsive and accessible
24	- Interactive and engaging
25	- Avoiding generic AI aesthetics
26
27	## Scope
28
29	### Included
30	- React components with TypeScript
31	- Modern CSS frameworks (Tailwind CSS)
32	- Component libraries (shadcn/ui)
33	- Responsive design patterns
34	- Interactive UI elements
35	- Icon integration (Lucide React)
36	- State management patterns
37	- Form handling and validation
38
39	### Excluded
40	- Backend API development
41	- Database schema design
42	- Server-side rendering configuration
43	- Build tooling setup
44	- Testing framework setup
45
46	## Inputs
47
48	- `requirements`: Description of what to build
49	- `framework`: Target framework (default: React + TypeScript)
50	- `styling`: Styling approach (default: Tailwind CSS)
51	- `components`: Component library preference (default: shadcn/ui)
52	- `features`: Specific functionality requirements
53	- `responsive`: Breakpoint requirements (default: mobile-first)
54
55	## Step-by-step Execution
56
57	1. Requirements Analysis
58	- Parse user requirements and identify core components needed
59	- Determine layout structure and responsive behavior
60	- Identify interactive elements and state requirements
61
62	2. Technology Stack Selection
63	- Use TypeScript for type safety
64	- Apply Tailwind CSS for styling
65	- Integrate shadcn/ui components where appropriate
66	- Include Lucide React for icons
67
68	3. Component Architecture
69	- Create modular, reusable components
70	- Implement proper TypeScript interfaces
71	- Follow React best practices (hooks, composition)
72	- Ensure proper separation of concerns
73
74	4. Styling Implementation
75	- Apply modern design principles
76	- Use consistent spacing and typography scales
77	- Implement responsive breakpoints
78	- Add hover states and transitions
79
80	5. Interactive Features
81	- Implement state management with useState/useReducer
82	- Add form validation where needed
83	- Include loading states and error handling
84	- Add keyboard navigation support
85
86	6. Quality Assurance
87	- Verify TypeScript compilation without errors
88	- Ensure responsive behavior across breakpoints
89	- Test interactive elements and accessibility
90	- Validate design consistency
91
92	## Output Contract
93
94	### Code Structure
95	```
96	ComponentName/
97	├── ComponentName.tsx # Main component
98	├── types.ts # TypeScript interfaces
99	└── index.ts # Export file
100	```
101
102	### Code Quality
103	- Strict TypeScript typing (no `any`)
104	- ESLint compliant code
105	- Consistent naming conventions
106	- Proper component composition
107	- Accessibility attributes (ARIA labels, semantic HTML)
108
109	### Design Quality
110	- Modern, professional appearance
111	- Consistent design system
112	- Responsive across mobile/tablet/desktop
113	- Smooth animations and transitions
114	- Intuitive user experience
115
116	## Verification Commands
117
118	```bash
119	# Type checking
120	npx tsc --noEmit
121
122	# Linting
123	npm run lint
124
125	# Build verification (if applicable)
126	npm run build
127
128	# Format check
129	npx prettier --check src/
130	```
131
132	## Evidence Format
133
134	- Screenshots: Visual proof of responsive design
135	- Code Quality: TypeScript compilation without errors
136	- Accessibility: WCAG compliance verification
137	- Performance: Lighthouse scores (if applicable)
138	- Cross-browser: Testing across modern browsers
139
140	## Safety / DONTs
141
142	### Security
143	- Never hardcode API keys or sensitive data
144	- Sanitize user inputs in forms
145	- Use proper HTTPS for external resources
146	- Validate data before processing
147
148	### Performance
149	- Don't create unnecessarily deep component nesting
150	- Avoid inline styles for complex styling
151	- Don't load unused dependencies
152	- Minimize re-renders with proper React patterns
153
154	### Accessibility
155	- Don't omit alt text for images
156	- Always provide keyboard navigation
157	- Don't use color alone to convey information
158	- Ensure proper heading hierarchy
159
160	### C

People who liked this also viewed

6 picks

Type