diff --git a/.github/skills/tailwindcss-development/SKILL.md b/.github/skills/tailwindcss-development/SKILL.md index 7c8e295..d2802e6 100644 --- a/.github/skills/tailwindcss-development/SKILL.md +++ b/.github/skills/tailwindcss-development/SKILL.md @@ -10,7 +10,7 @@ metadata: ## Documentation -Use `search-docs` for detailed Tailwind CSS v4 patterns and documentation. +Use `search-docs` for detailed Tailwind CSS v3 patterns and documentation. ## Basic Usage @@ -18,55 +18,22 @@ Use `search-docs` for detailed Tailwind CSS v4 patterns and documentation. - Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue). - Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically. -## Tailwind CSS v4 Specifics +## Tailwind CSS v3 Specifics -- Always use Tailwind CSS v4 and avoid deprecated utilities. -- `corePlugins` is not supported in Tailwind v4. +- Always use Tailwind CSS v3 and verify you're using only classes it supports. +- Configuration is done in the `tailwind.config.js` file. +- Import using `@tailwind` directives: -### CSS-First Configuration - -In Tailwind v4, configuration is CSS-first using the `@theme` directive — no separate `tailwind.config.js` file is needed: - - + ```css -@theme { - --color-brand: oklch(0.72 0.11 178); -} +@tailwind base; +@tailwind components; +@tailwind utilities; ``` -### Import Syntax - -In Tailwind v4, import Tailwind with a regular CSS `@import` statement instead of the `@tailwind` directives used in v3: - - -```diff -- @tailwind base; -- @tailwind components; -- @tailwind utilities; -+ @import "tailwindcss"; -``` - -### Replaced Utilities - -Tailwind v4 removed deprecated utilities. Use the replacements shown below. Opacity values remain numeric. - -| Deprecated | Replacement | -|------------|-------------| -| bg-opacity-* | bg-black/* | -| text-opacity-* | text-black/* | -| border-opacity-* | border-black/* | -| divide-opacity-* | divide-black/* | -| ring-opacity-* | ring-black/* | -| placeholder-opacity-* | placeholder-black/* | -| flex-shrink-* | shrink-* | -| flex-grow-* | grow-* | -| overflow-ellipsis | text-ellipsis | -| decoration-slice | box-decoration-slice | -| decoration-clone | box-decoration-clone | - ## Spacing -Use `gap` utilities instead of margins for spacing between siblings: +When listing items, use gap utilities for spacing; don't use margins. ```html @@ -110,10 +77,15 @@ If existing pages and components support dark mode, new pages and components mus ``` +## Verification + +1. Check browser for visual rendering +2. Test responsive breakpoints +3. Verify dark mode if project uses it + ## Common Pitfalls -- Using deprecated v3 utilities (bg-opacity-*, flex-shrink-*, etc.) -- Using `@tailwind` directives instead of `@import "tailwindcss"` -- Trying to use `tailwind.config.js` instead of CSS `@theme` directive - Using margins for spacing between siblings instead of gap utilities -- Forgetting to add dark mode variants when the project uses dark mode \ No newline at end of file +- Forgetting to add dark mode variants when the project uses dark mode +- Not checking existing project conventions before adding new utilities +- Overusing inline styles when Tailwind classes would suffice \ No newline at end of file diff --git a/AGENTS.md b/AGENTS.md index 6524910..13bc8cf 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -19,7 +19,8 @@ This application is a Laravel application and its main Laravel ecosystems packag - laravel/pint (PINT) - v1 - pestphp/pest (PEST) - v4 - phpunit/phpunit (PHPUNIT) - v12 -- tailwindcss (TAILWINDCSS) - v4 +- alpinejs (ALPINEJS) - v3 +- tailwindcss (TAILWINDCSS) - v3 ## Skills Activation @@ -108,6 +109,20 @@ This project has domain-specific skills available in `**/skills/**`. You MUST ac - Laravel can be deployed using [Laravel Cloud](https://cloud.laravel.com/), which is the fastest way to deploy and scale production Laravel applications. +=== herd rules === + +# Laravel Herd + +- The application is served by Laravel Herd at `https?://[kebab-case-project-dir].test`. Use the `get-absolute-url` tool to generate valid URLs. Never run commands to serve the site. It is always available. +- Use the `herd` CLI to manage services, PHP versions, and sites (e.g. `herd sites`, `herd services:start `, `herd php:list`). Run `herd list` to discover all available commands. + +=== tests rules === + +# Test Enforcement + +- Every change must be programmatically tested. Write a new test or update an existing test, then run the affected tests to make sure they pass. +- Run the minimum number of tests needed to ensure code quality and speed. Use `php artisan test --compact` with a specific filename or filter. + === laravel/core rules === # Do Things the Laravel Way diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php new file mode 100644 index 0000000..5bacba7 --- /dev/null +++ b/resources/views/home.blade.php @@ -0,0 +1,126 @@ + + + + + + + Neighborhood News Portal + + @vite(['resources/css/app.css', 'resources/js/app.js']) + + +
+ @if (\Illuminate\Support\Facades\Route::has('login')) +
+ +
+ @endif + +
+ Forested hills in the distance +
+
+
+

Local Neighborhood Portal

+
+
+

Taman Melawati News

+

+ Friendly updates from around the block. Stories are placeholders for now, but the spirit is real. +

+

Inspired by the hills and forest edges around our neighborhood

+
+
+

Good morning, Neighbor

+

Tuesday community digest

+
+
+
+
+ +
+
+
+ Misty forested mountain backdrop +
+
+

Top Story

+

Community Garden Harvest Day Set for Saturday

+

+ Volunteers from Cedar Lane and Oak Street are gathering at 8:00 AM to pick tomatoes, herbs, and okra. + Bring a reusable bag and a smile. Extra produce will be shared with nearby families. +

+
+ By Hana, local editor + 2 hours ago +
+
+
+ +
+
+

Street Update

+

Pine Street Lighting Repaired

+

Evening walks are brighter again after three new lamps were installed this week.

+
+
+

School Corner

+

Book Drive Reaches 500 Donations

+

Taman Melawati Elementary thanks neighbors for donating books to the weekend reading club.

+
+
+
+ + +
+
+ + \ No newline at end of file diff --git a/routes/web.php b/routes/web.php index 81dafe8..8003715 100644 --- a/routes/web.php +++ b/routes/web.php @@ -7,7 +7,7 @@ use App\Http\Controllers\UserController; use Illuminate\Support\Facades\Route; Route::get('/', function () { - return view('welcome'); + return view('home'); }); Route::get('/dashboard', function () { diff --git a/tests/Feature/ExampleTest.php b/tests/Feature/ExampleTest.php index 8b5843f..c86615d 100644 --- a/tests/Feature/ExampleTest.php +++ b/tests/Feature/ExampleTest.php @@ -3,5 +3,10 @@ it('returns a successful response', function () { $response = $this->get('/'); - $response->assertStatus(200); + $response + ->assertSuccessful() + ->assertSee('Taman Melawati News') + ->assertSee('Community Garden Harvest Day Set for Saturday') + ->assertSee('Login') + ->assertSee('Register'); });