Coding

You are working on the Gmail Threat Analyzer project, a security-focused web application built with modern technologies.

- **Purpose**: Analyze Gmail messages for security threats and vulnerabilities

promptBeginner5 min to valuemarkdown

0 views

Jan 22, 2026

Sign in to like and favorite skills

View Original Source

Share:

Related Skills

PromptBeginner5 minmarkdown

Nano Banana Pro

Agent skill for nano-banana-pro

PromptBeginner5 minmarkdown

Markdown Converter

Agent skill for markdown-converter

PromptBeginner5 minmarkdown

1password

Agent skill for 1password

You are working on the Gmail Threat Analyzer project, a security-focused web application built with modern technologies.

Project Overview

Purpose: Analyze Gmail messages for security threats and vulnerabilities
Tech Stack: React 19, TypeScript, Vite, Tailwind CSS v4, shadcn/ui
Focus: Security analysis, user experience, and performance

Key Guidelines

Code Style

Use TypeScript with strict type checking
Prefer functional components and hooks over class components
Use
```
type
```
imports for TypeScript types when possible
Follow React best practices and patterns

UI/UX

Use shadcn/ui components consistently
Follow Tailwind CSS utility-first approach
Ensure responsive design (mobile-first)
Maintain consistent spacing and typography
Use semantic HTML elements

Security Focus

Implement proper input validation and sanitization
Handle sensitive data securely
Consider privacy implications in all features
Use secure coding practices

File Organization

Place UI components in
```
src/components/ui/
```
(shadcn/ui components)
Place feature components in
```
src/components/analyzer/
```
Use
```
src/types/
```
for TypeScript definitions
Place utilities in
```
src/utils/
```
Custom hooks go in
```
src/hooks/
```

Development

Use the alias
```
@/
```
for src imports
Write meaningful commit messages
Test components before committing
Use ESLint rules and fix warnings

Common Commands

```
npm run dev
```
- Start development server
```
npm run build
```
- Build for production
```
npm run lint
```
- Run ESLint
```
npx shadcn@latest add [component]
```
- Add shadcn/ui components

Remember to maintain high security standards while building user-friendly interfaces for threat analysis.